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

最新推荐文章于 2022-12-13 15:30:01 发布

左直拳

最新推荐文章于 2022-12-13 15:30:01 发布

阅读量1.9w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Web 文章标签： css class before active

本文链接：https://blog.csdn.net/leftfist/article/details/51377816

Web 专栏收录该内容

163 篇文章

订阅专栏

本文介绍了一段HTML代码中带有特定CSS样式的图标显示效果及其实现原理，详细解析了如何通过CSS选择器设置图标颜色及其在鼠标悬停时的颜色变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有一段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;
}