CSS不会覆盖样式

时间:2018-11-21 14:02:25

标签: html css css3 css-selectors stylesheet

我有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;
}

为什么?

3 个答案:

答案 0 :(得分:2)

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

示例:

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

颜色不会改变。

但是

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

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

答案 1 :(得分:1)

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

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

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

  

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

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

答案 2 :(得分:1)

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

MDN - Specificity

  

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

     

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

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

  

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

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

  2.   
  3. 类选择器(例如.example),属性选择器(例如[type="radio"])和伪类(例如:hover)。

  4.   
  5. ID选择器(例如#example)。

  6.   
     

通用选择器(*),组合器(+>~' ')和否定伪类(: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。如果不小心丢掉它们,可能有时您实际上需要覆盖一个,但是您已经使用了最高优先级。