CSS优先级覆盖问题

一般来说,CSS优先级覆盖有以下几个概念:

  • !important 重要性
  • 默认继承
  • 优先级计算

!important (重要性)

!important默认的权重最高,会覆盖其他所有属性. 而且!important属性会无视默认CSS的权重问题,即权重相同后面的会覆盖前面定义的CSS样式

1
2
3
4
5
6
7
p {
color: black !important; //权重最高
}


p {
color: red;
}

默认继承

例如color, font这些属性,父元素的颜色影响子元素是有用的,避免大规模定义,可以提供效率。但类似margin, padding这些CSS是默认不继承父元素,但也提供了以下的方法实现继承:

1
2
3
4
5
6
7
aside {
margin: 10px;
}


aside section {
margin: inherit;
}

与inherit相对的值是initial. 表示取消继承. (?怎么用?)

通用选择器

优先级计算

牢记:ID选择器比任意数量的class, 属性或元素选择器要高.
用a, b, c, d 代表优先级依次递减。计算公式:

  • a 如果style属性定义的声明,则为1,否则为0;
  • b 等于id选择器的数目
  • c 等于属性选择器,class和伪class的数量
  • d 等于元素名和伪元素的数目

以下权重为0,0,1,3(a = 0, b = 0, c = 1, d = 3)

1
2
3
article section h1.title {

}

以下权重为0,1,0,0

1
2
<section style="padding-bottom: 10px;">
</section>

命名空间

1
2
3
4
5
6
7
8
9
10
11
h2 {
font-size: 24px;
}


.home h2 {
font-size: 36px;
}


.home h2.hightlight {
font-size: 30px;
}

场景:主页定义了h2的字体大小, 子页面重新覆盖了主页面的h2字体大小,因为需求需要,又覆盖了子页面的h2字体大小。
这样会导致的问题就是css代码的层级层级越来越长,特别在用LESS/SASS不恰当使用下,这种情况会被大量的滥用。