尽管类序列相同，但 CSS 优先级会发生变化

Question

我有一个反应组件，它存在于两个不同的应用程序中，有两个不同的webpack 脚手架。

在里面，我正在使用这样的FontAwesome 组件（react-fontawesome）：

<FontAwesome
  name="chevron-left"
  className="viewtoggle"
  onClick={() => doSomething()}
/>

现在，在两个应用程序之一中，viewtoggle 定义优先于 FontAwesome 默认 css fa fa-chevron-left，但在另一个应用程序中则相反，导致 font-size 的 viewtoggle 定义和line-height 被跳过。

在 chrome 调试器中检查这一点，span 上的类具有正确且相同的序列fa fa-chevron-left viewtoggle，请参见屏幕截图。但是，它们在调试器中具有不同的垂直顺序，表示不同的优先级。这可能是什么原因？

我检查的 3 个浏览器的效果相同，所以这不是浏览器问题。但是还有什么会导致这种差异呢？

更新我希望找到一个不处理FontAwesome internals（或!important）的解决方案。

好处：

坏处：

Answer 1

...它们 [应用的 CSS 规则] 在调试器中具有不同的垂直顺序，表示不同的优先级。这可能是什么原因？

正如@Turnip 在 cmets 中所说，文件正在以不同的顺序加载或定义。由于选择器.fa 和.viewtoggle 具有相同的特异性，所以最后一个优先。您可以通过增加所需规则集的特异性来解决此问题：

.fa.viewtoggle { ... }

请注意，类字符串fa fa-chevron-left viewtoggle 中的类序列对您正在使用的 CSS 选择器的特异性没有影响。但是，当为class 属性使用属性选择器时，顺序可能很重要，例如[class="fa viewtoggle"] 与[class="viewtoggle fa"]。查看this answer了解更多详情。