四个步骤看CSS计算每一个样式属性的权重

红太狼 2021-06-26 16:06 250阅读 0赞

## 第一步，遍历所有选择器 ##

浏览器在渲染某个`HTML`元素时，首先会寻找所有作用在该元素上的有效`CSS`选择器，为此，它根据指定的媒体类型（`media type`）遍历所有的样式表来源，选择器的来源包括：用户代理（浏览器）样式、作者样式和用户样式。

常用的`media type`包括`all/screen/print`，可以通过如下的方式定义： `<link href="style.css" media="screen print" ...>`

**浏览器样式**

也就是浏览器自身设置用来显示网站的默认样式，不同的浏览器可能有不同的样式表，例如`Chrome`和`IE、Firefox`的就不一样，所以大家分别使用这些浏览器访问同一个网站的时候，看到实际效果可能就不尽相同。

**用户样式**

浏览器还允许用户设置网页的样式，例如，我们用IE浏览网站的时候，都可以通过浏览器查看菜单下的样式或者文字大小子菜单来设置网页实际的显示效果。

## 第二步，比较样式属性的重要性 ##

通常情况下，作者样式具有最高的重要性，其次是用户样式，最后才是浏览器样式，但是如果出现了`!important`标记的话，那么规则会被改变，通过`!important` 可以提高某种样式的重要性，让它的优先级高于其他没有加该声明的所有样式。下面是样式属性的重要性顺序（由高至低）：

1.  标记为`!important`的作者样式
2.  标记为`!important`的用户样式
3.  作者样式
4.  用户样式
5.  浏览器（用户代理）的默认样式

## 第三步，比较样式属性的具体性(`Specificity`) ##

具体性可以通过一个简化易用的`1000`法则来计算

内联样式（`inline styling`） 权重 1000

*  ID（`#id`） 权重 100
 *  类（`.class`） 权重 10
 *  标签（`tag`） 权重 1

然后你可以把多个选择器的权值相加，来得到最终的`Specificity`：

*  `p` 具体性 1 (1个标签选择器)
 *  `div p` 具体性 2 (2个标签选择器, 1+1)
 *  `tree` 具体性 10 (1个类选择器)
 *  `div p.tree` 具体性 12 (2个标签选择器 + 1个类选择器, 1+1+10)
 *  `#baobab` 具体性 100 (1个id选择器)
 *  `body #content .alternative p` 具体性 112 (标签选择器 + id选择器 + class选择器 +  
    标签选择器, `1+100+10+1`)

选择器具体性的完整计算公式要比上面复杂得多，但了解上面的法则在一般情况下已经足够。

## 第四步，判断样式属性出现的先后顺序 ##

这一步最简单，出现晚的选择器将拥有高优先级，也就是后来者居上。

对于外部引入的样式表，`@import`比`link`拥有更高的优先级，不管它是否出现在`link`引入之后。

理解了上述的优先级计算规则，我们应该可以推断出前面例子中`p`元素的最终颜色：

#introduction{  color: red;}
    
    .message{  color: green;}
    
    p{  color: blue;}

<p class="message" id="introduction">
    HTML/CSS高级教程。
    </p>