覆盖语义UI样式的问题

Question

我的问题是如何以最简单的方式从语义ui覆盖样式？我编译了语义表，并编写了其他一些CSS表。例如，我有用于列的容器，并且想在开始时将其隐藏，因此我向div添加了一个类，然后将其设置为“ display：none”。但是它仍然显示出来，因为语义上的其他一些样式更重要。这非常不舒服。如何修复它并设置自己的样式以覆盖语义样式？

Answer 1

这并不是真正针对语义UI的。您需要花一点时间来了解CSS的特异性。令人高兴的是，那里有很多很好的资源，例如安迪·克拉克（Andy Clarke）的《特异性战争》。

掌握了这些信息后，加载浏览器的“ 开发人员工具 ”和inspect遇到问题的元素。在CSS面板中，您将看到应用于该元素的所有CSS。顶部的东西具有更高的CSS特异性。您很有可能会在自定义CSS中看到一行。这是在告诉您浏览器已应用了样式，但其他样式取代了样式。在别的东西将与线路认为这是不显示的CSS面板声明。

比较它们时，您可能会注意到（在阅读《 Specific Wars》或类似文章之后），没有删除线的项目正在使用更具体的选择器。也许您的CSS选择器只有一个类，但是SemanticUI选择器有两个类，.class-foo.class-bar在这种情况下，SemanticUI选择器将“打赢”这场战争。

有几种方法可以解决此问题，但最简单的方法是使选择器更具体（或在“ Specificity Wars”中具有更大的“权重”）。同样，也有几种方法可以执行此操作，但最简单的方法可能是id在某些父/包装容器中添加一个，因为ids具有很多特异性“权重”。然后，在您的自定义样式选择器中使用该ID。

<div id="my-wrapper"> 
    <div class="item"></div>
    <div class="some-other-item"></div>
    <!-- all of your HTML here --> 
</div>

然后，您可以在CSS中使用ID：

#my-wrapper .item {
    color: I-Will-Beat-You-CSS-Library;
}