css 规则中两个类连在一起

css 规则中两个类连在一起是什么意思?

原文地址:http://www.cxybl.com/html/wyzz/CSS/20120601/27374.html

有一段HTML代码:

<a class="glyphicons white no-js cogwheel" href="#" target="_blank"><i></i></a>

对应有CSS style: 

.glyphicons.white i:before {
  color: #fff;
}
.glyphicons.white:hover i:before {
  color: #b6ff00;
}

那么出现的效果是:
一个图标,齿轮是白的
这里写图片描述

当鼠标移到齿轮时,齿轮变黄绿:
这里写图片描述

解释一下这段CSS代码给自己听

/*当有元素同时包含 "glyphicons" 和 "white" class,并且拥有子元素<i>的时候,在<i>前面设置颜色为白色的style*/
.glyphicons.white i:before {
  color: #fff;
}

/*当有元素同时包含 "glyphicons" 和 "white" class,并且拥有子元素<i>的时候,当鼠标悬停其上,则在<i>前面设置颜色为#b6ff00(黄绿)的style*/
.glyphicons.white:hover i:before {
  color: #b6ff00;
}

另外一个例子:

比如: .c1.c2 { text-decoration:underline; } 选择器中 .c1 与 .c2 直接连在一起,中间无空格、无逗号,表示什么意思?

看个例子:

 head style type="text/css"

.c1 { color:#ff0000; }

.c2 { font-style:italic; }

.c1.c2 { text-decoration:underline; }

比如:

.c1.c2
{
text-decoration:underline;
}


选择器中 .c1 与 .c2 直接连在一起,中间无空格、无逗号,表示什么意思?看个例子:

<head>
<style type="text/css">
.c1
{
color:#ff0000;
}
.c2
{
font-style:italic;
}
.c1.c2
{
text-decoration:underline;
}
</style>
</head><body>
<p class="c1">这里是红色</p>
<p class="c2">这里是斜体</p>
<p class="c1 c2">这里是红色、斜体、下划线</p>
</body>

结果已经通过文字直接描述出来了,原来 .c1.c2 表示如果一个标签中同时使用了这两个类(不论顺序、不论是否还有其他类),则响应此样式规则。

发布了36 篇原创文章 · 获赞 21 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_39833509/article/details/103818592