有一段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 表示如果一个标签中同时使用了这两个类（不论顺序、不论是否还有其他类），则响应此样式规则。也就是某个元素同时拥有该2个类时才会生效！