html - CSS 不会覆盖样式

Question

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

1-style.css2-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

您的声明是根据它们的具体程度来应用的。

根据 MDN - Specificity :

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.

上面的链接还介绍了确定特异性的因素:

The following list of selector types increases by specificity:

1. Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).

2. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).

3. ID selectors (e.g., #example).

Universal selector (*), combinators (+, >, ~, ' ') and negation pseudo-class (:not()) have no effect on specificity. (The selectors declared inside :not() do, however.)

---

CSS 根据一些条件选择应用哪些规则。给定规则应用于同一元素，它们按以下顺序被视为:

1。 !重要

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。如果您粗心地乱扔它们，可能会有一段时间您实际上需要覆盖一个，但您已经使用了最高优先级。