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

Question

我有一个反应组件，它位于两个不同的应用程序中，有两个不同的webpack支架。

在内部，我正在使用FontAwesome组件（react-fontawesome），如下所示：

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

现在，在两个应用中的一个中，viewtoggle定义优先于FontAwesome默认css fa fa-chevron-left，但在另一个应用中则相反，导致{{1}已跳过viewtoggle和font-size的定义。

在Chrome调试器中检查此内容，line-height上的类具有正确且相同的序列span，请参阅屏幕截图。但是，它们在调试器中具有不同的垂直顺序，表示不同的优先级。这可能是什么原因？

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

更新我希望找到一个不涉及fa fa-chevron-left viewtoggle内部（或FontAwesome）的解决方案。

好处：

坏事：

Answer 1

  

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

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

.fa.viewtoggle { ... }

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