CSS的两个class选择器紧挨在一起

有一段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,并且拥有子元素的时候,在前面设置颜色为白色的style*/
.glyphicons.white i:before {
  color: #fff;
}

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

转载于:https://www.cnblogs.com/leftfist/p/6808719.html

你可能感兴趣的:(CSS的两个class选择器紧挨在一起)