关于Font Awesome图标CSS特异性的疑问：为何颜色取自icon--apply而非.classname__icon--apply？

这大概率没有违反CSS特异性规则，你可能只是忽略了几个常见的细节，咱们一步步来梳理排查：

1. 先搞清楚两个选择器的特异性权重 #

CSS的特异性是按「内联样式 > ID选择器 > 类/伪类/属性选择器 > 元素/伪元素选择器」的层级来计算的，咱们拆解你的两个选择器：

• icon--apply：纯类选择器，特异性权重为 0,0,1,0
• .classname__icon--apply：同样是纯类选择器，权重也是 0,0,1,0

当两个选择器权重相同时，样式声明的顺序就会决定优先级——后出现在CSS文件里的样式会覆盖先出现的。你可以先检查一下：是不是icon--apply的样式代码写在了.classname__icon--apply的后面？

2. 检查选择器的匹配是否准确 #

有时候看起来类名加对了，但实际可能有这些坑：

• 你的Font Awesome图标元素上，是不是同时存在icon--apply和classname__icon--apply两个类？如果图标只加了icon--apply，那自然只会应用它的样式
• 有没有嵌套层级的问题？比如.classname__icon--apply是不是写在了某个父级选择器的嵌套里，而父级的条件没满足？举个例子，如果你的CSS是.some-parent .classname__icon--apply，但图标不在.some-parent容器里，那这个选择器就不会生效，而全局的icon--apply自然就生效了

3. 排查是否有!important的干扰 #

虽然不推荐滥用，但如果icon--apply的样式里加了!important，那它会直接覆盖普通的类选择器样式，哪怕你的.classname__icon--apply写在后面。比如：

.icon--apply {
  color: #ff0000 !important;
}
.classname__icon--apply {
  color: #0000ff; /* 这个样式会被上面的!important覆盖 */
}

4. 检查Font Awesome的样式继承与元素绑定 #

Font Awesome的图标（不管是<i>还是<svg>形式）有时候会有特殊的样式继承逻辑，或者你有没有把类加错了元素？比如：
如果你的.classname__icon--apply加在了图标父元素上，而不是直接加在图标元素本身，那它的颜色样式可能不会传递给图标，除非你明确写嵌套选择器（比如.classname__icon--apply .fa）。而直接加在图标上的icon--apply自然优先级更高。

举个错误示例：

<!-- 父元素加了目标类，但图标本身没加 -->
<div class="classname__icon--apply">
  <i class="fa fa-check icon--apply"></i>
</div>

如果你的CSS只写了.classname__icon--apply { color: blue; }，那这个颜色不会传递给里面的图标；但如果写.classname__icon--apply .fa { color: blue; }，权重就会比.icon--apply更高（0,0,2,0 vs 0,0,1,0），就能生效了。

快速排查技巧 #

直接打开浏览器开发者工具（按F12），选中你的图标元素，查看「Styles」面板：

• 看看哪些颜色样式被应用了，被划掉的样式就是被覆盖的
• 面板里会明确显示覆盖当前样式的选择器，对比一下就能找到问题根源啦

内容的提问来源于stack exchange，提问作者prion_niopr