[分享]css中 的权重是多少

在CSS中，当同一个属性在多个样式表中存在时，浏览器如何决定使用哪个样式呢？这就要用到CSS的“优先级（Specificity）”了。CSS语言中，优先级是由“选择器”和“声明”组成的。选择器的优先级...

在CSS中，当同一个属性在多个样式表中存在时，浏览器如何决定使用哪个样式呢？这就要用到CSS的“优先级（Specificity）”了。CSS语言中，优先级是由“选择器”和“声明”组成的。

选择器的优先级通常是用四元组表示，分别是：

（[内联样式]，ID选择器，类选择器+属性选择器+伪类，元素选择器+伪元素选择器） 

其中，“内联样式”的优先级最高，因为它直接写在HTML标签中，而且其能够作用于任何一个元素。

如果同级别没有内联样式或都有内联样式，则选择器中ID选择器的权重最高，因为ID选择器的唯一性比其他选择器要强。

如果同级别没有内联样式或ID选择器，那么类选择器+属性选择器+伪类的优先级最高，因为它们靠近元素名，且拥有更多的匹配条件。

如果同级别没有内联样式、ID选择器、类选择器+属性选择器+伪类，那么元素选择器+伪元素选择器就是最低优先级。

当优先级相同时，浏览器将选择最后面的样式表。

这四元组并不能简单地相加、比较大小，需要将它们转化为10进制的四位数，例如：

（0, 1, 0, 0）  =>  100
（0, 0, 10, 1） =>  11 

这样，就可以方便比较优先级高低了。