CSS学习之选择器权重

CSS选择器的权重问题：

常用选择器类型：

• 标签选择器（又可以叫：元素选择器/代表类型选择器）
• id选择器
• 属性选择器
• 类选择器
• 通配符
• 子代选择器、后代选择器、相邻选择器
• 伪类
• 伪元素

选择器权重：

名称	权重值
标签选择器、伪元素选择器	0,0,0,1
属性选择器、伪类选择器、类选择器	0,0,1,0
id选择器	0,1,0,0
内联样式	1,0,0,0
子代选择器、后代选择器、相邻选择器、通用选择器(*)	0,0,0,0
继承的样式没有权重值	最低
!important	infinity(最大)

注意：

• 选择器的权重值可叠加但是并不是10进制（其实是256进制，基本可以不考虑进制），也就是10个标签选择器叠加也抵不上一个类选择器。

.a.b.c.d.e.f.g.h.i.j   权重值是0,0,10,0

#first                     权重值是0,1,0,0

div div                   权重值是0,0,0,2

div#first                 权重值是0,1,0,1

div:hover               权重值是0,0,1,1

div#first p[atttribute="value"]    权重值是0,1,1,2

 

• 选择器权重的比较是从左到右的，只有当左边第一个相等的时候才会比下一位，依次往后推。

0,0,1,0 > 0,0,0,11

0,1,10,0 > 0,1,8,0

• 选择器权重相等，则按照就近原则（近的优先级高）

<style>
div {
    color:blue;  /* 权重值为0,0,0,1*/
}

div{
    color:white; /* 权重值为0,0,0,1  但是优先级高 */
}
</style>

.div{
    color:white !important; /* 权重最大 */
}