CSS不会覆盖样式

Question

我有2个分别加载的样式表文件style.css和index.css

1-style.css 2-index.css

在我的style.css中，我有这样的代码

#mainNav nav > a:hover span:before {
    background-color: transparent !important;
}

#mainNav nav a.darkBlue span:before {
        background-color: #17729a;
}

现在在我的index.css中

我写

#mainNav .darkBlue span:before {
background-color: transparent;
}

它不起作用，我应该在最后写下！important使它起作用

但是当我以不同的方式（如我在style.css中使用的方式）编写选择器顺序时，它无需！important即可工作

像这样

#mainNav nav a.darkBlue span:before {
    background-color: transparent;
}

为什么？

Answer 1

CSS具有层次结构。如果要覆盖某些样式，则必须使用相同的选择器或更具体的选择器。

示例：

a.selector { color: blue }
.selector { color: red }

颜色不会改变。

但是

.selector { color: blue }
a.selector { color: red }

会将颜色更改为红色，因为TAG和类别选择器的组合更加具体。

Answer 2

您有一种称为CSS特殊性的东西：

https://www.w3schools.com/css/css_specificity.asp

非常了解第一本和特异性的顺序：检查https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/ 请注意，这是一篇很长的文章。大多数人甚至都不知道它能走多远。

  

简单地说：如果两个CSS选择器应用于同一元素，则一个   具有更高的特异性获胜。

这就是为什么我遵循BEM方法论的原因，这避免了此类麻烦。

Answer 3

您的声明将基于它们的特定性来应用。

每MDN - Specificity：

  

Specificity是浏览器确定哪些CSS属性值与某个元素最相关的方法，因此将被应用。

     

Specificity是应用于给定CSS声明的权重，具体取决于匹配选择器中每种选择器类型的数量。

上面的链接还涉及确定特异性的因素：

  

以下选择器类型列表按其特异性增加：

     

  

1. 类型选择器（例如h1）和伪元素（例如::before）。

  

2. 类选择器（例如.example），属性选择器（例如[type="radio"]）和伪类（例如:hover）。

  

3. ID选择器（例如#example）。

  

     

通用选择器（*），组合器（+，>，~，' '）和否定伪类（:not() ）对特异性没有影响。 （但是，在:not()中声明的选择器可以。）

---

CSS根据一些条件选择要应用的规则。给定适用于同一元素的规则，将按以下顺序进行考虑：

1。 !important

span { color: red; }               /* base */
#mySpan { color: blue; }           /* specific  */
span { color: green !important; }  /* important */

<span id="mySpan" style="color: purple;">Example</span>

2。内联样式

span { color: red; }               /* base */
#mySpan { color: blue; }           /* specific  */

<span id="mySpan" style="color: purple;">Example</span>

3。特异性

span { color: red; }               /* base */
#mySpan { color: blue; }           /* specific  */

<span id="mySpan">Example</span>

4。最后声明

span { color: red; }               /* base */
span { color: yellow; }            /* last applied */

<span>Example</span>

---

通常最好避免使用!important。如果不小心丢掉它们，可能有时您实际上需要覆盖一个，但是您已经使用了最高优先级。