Question

我的问题是如何以最简单的方式从语义中覆盖样式？我编译语义表并有一些我做的其他CSS表。例如，我有列的容器，我想在开头隐藏它，所以我在div中添加了一个类，然后将其设置为“display：none”。但它仍然表明，因为语义中的其他一些风格更重要。这是非常不舒服的。如何解决它并设置我自己的样式覆盖语义？

Answer 1

这并不是特定于语义UI。您需要花一点时间来了解CSS中的特异性。令人高兴的是，像Andy Clarke的Specificity Wars那样有很多好的资源。

有了这些信息，请加载浏览器的“Developer tools”和inspect您遇到问题的元素。在CSS面板中，您将看到应用于该元素的所有CSS。向顶部的东西具有更高的CSS特异性。更有可能的是，你会看到你的自定义CSS带有一条线。这告诉你浏览器应用了这种风格，但别的东西覆盖了它。 别的东西将是CSS面板中的声明，这些声明不会显示为一行。

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

有一些方法可以解决这个问题，但最简单的方法是让您的选择器更具体（或者在特殊性战争中使用更多'权重'）。同样，有几种方法可以做到这一点，但也许最简单的方法是将id添加到某个父/包装容器，因为id带有很多特异性“权重”。然后，在自定义样式选择器中使用该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;
}

Answer 2

虽然使用ids和!important可以解决问题，但就我而言，问题是语义声明是在我的自定义CSS声明（site.css）之后发生的，所以很明显优先考虑。我所要做的就是将我的自定义CSS声明移到semantic.css下面，瞧！那对我有用。

<强>之前：

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
  <link href="/Content/site.css" rel="stylesheet"/>
  <script src="/Scripts/semantic.js"></script>
  <link href="/Content/semantic.css" rel="stylesheet"/>
</head>

<强>后：

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
  <script src="/Scripts/semantic.js"></script>
  <link href="/Content/semantic.css" rel="stylesheet"/>
  <link href="/Content/site.css" rel="stylesheet"/>
</head>

overridng语义UI样式的问题

2 个答案: