完全搞清楚css权重

什么是css权重

一个元素有多个样式对他进行设置的时候，那么哪一个样式会起做用呢？这就须要一个规则计算，这个规则就是权重。谁的权重大，就使用那个样式。

根据w3c的规范，元素分为三个等级：

• id选择器（称之为 a等级）
• 类选择器，属性选择器，伪类(咱们称之为b等级)
• 标签，伪元素（咱们称之为c等级）

计算权重

咱们按照刚才的规则进行分类计算，计算一下有几个a，几个 b ， 几个 c 。

示例：

body #content .data img:hover
复制代码

这个按照a,b,c这种格式计算的结果就是：1,2,2。

咱们来分析一下。

有1个a： #content 。

有2个b：一个class：.data , 一个伪类：:hover。

有2个 c：body 和 img

那咱们再来看几个例子：

// 0,0,2（一个标签，一个伪元素）
li:first-line
复制代码

// 0,1,1（一个属性选择器，一个标签）
h1 + *[rel=up]
复制代码

// 1,1,2(一个id选择器，一个类选择器，2个标签)
body #darkside .sith p
复制代码

使用方法。

如今咱们已经知道怎么计算权重了，下一步咱们就看看怎么来比较谁的权重大谁的权重小。权重大的样式会起做用。

首先比较第一个等级a ，谁的 a 的个数多权重就大。若是 a的个数同样，则比较 b，跟 a的规则同样，谁的b的个数多，谁的权重就大。若是同样在比较 c。同样的规则。

这样的话，谁的权重大，谁就对元素起做用。

若是最后abc 都同样怎么办，那就比较谁最后写的，通常后面写的会覆盖前面的样式。

好比：

body div{
    background: blue
}
 
div{
    background: red;
}
复制代码

以上两个样式，blue 会起做用。

!important 和 行内样式

除了以上三个等级以外，咱们还有另外两个，一个是行内样式，一个是 !important 。

而行内样式 比 ID选择器高一级，!important 比行内样式又高一级。

等级关系

因此最终等级比较是：

!important > 行内样式 > ID选择器 > 类选择器 | 属性选择器| 伪类选择器 > 标签|伪元素

经过上面的方法，咱们就能够计算出权重，比较大小。就能够知道那个样式会起做用了。

建议

• 通常不推荐使用!important ，他的等级过高。后期若是对元素有修改很难突破。
• 能不用id，就尽可能不使用。

最后神器

最后推荐一个特别棒的工具，你能够输入选择器，而后计算权重。也能够对多个权重进行排序。

若是不清楚哪一个权重更大，使用这个工具能够一目了然，也方便咱们对权重的学习。

结语

若是你们发现有什么错误的地方，欢迎指正。但愿能给你们带来一点收获。

参考资料：

• www.w3.org/TR/selector…

• www.smashingmagazine.com/2007/07/css…