特殊性

同一个元素可以设置多个选择器,就会导致可能有重复的规则,但是浏览器不可能两个规则都显示,所以最终只会显示一个规则,那到底是运用哪一个规则呢?

答案就在于每个选择器的特殊性,最高特殊性的声明会胜出。

选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分:0 0 0 0

一个选择器的具体特殊性如下:

ID选择器                              0  1  0  0
类选择器、属性选择器以及伪类选择器    0  0  1  0 (这里伪类包括结构性伪类和UI元素状态伪类)
元素选择器、伪元素选择器              0  0  0  1
其他像通配选择器、派生选择器          0  0  0  0
内联样式                              1  0  0  0

注,这里的4位数字跟数学里面的个、十、百、千位数是不一样的

0 1 0 0 是大于 0 0 100 0

重要性

有时某个声明可能非常重要,超过了所有其他声明,此时就可以在这具体规则后加上 !important 来标志;

加上重要性的标志后其特殊性比没有重要性标志的特殊性更高,即比内联样式(1 0 0 0)的特殊性还高;

继承

基于继承机制,样式不仅可以应用到指定的元素,同时还会运用到其后代元素。这样可以减少很多没必要的选择器声明;

不过,也不是所有的属性都能继承,有部分属性是不能继承的,比如paddingmargin以及border等;

还有一个特殊的地方,即如果<html>上没有设置background相关属性,而<body>上有设置,则<body>会向上传播到<html>上;

继承没特殊性连0都没,通配选择符特殊性为0,因此当继承遇到通配选择符的时候,通配选择符会胜出;

层叠

正常情况下,按规则出现的顺序,越后出现其权重越大