参考链接
笔记
同一元素的同一属性权重:
!important > 行内样式 > id 选择器 > (class 、属性、伪类选择器 )> (标签、伪元素选择器 )> 通配选择器
具体计算规则见下文。
注意,优先级比较的是相同元素的相同属性
- 如果!important被用于一个简写的样式属性,那么这条简写的样式属性所代表的子属性都会被应用上!important。 例如:background: blue !important;
- 如果两条样式都使用!important,则权重值高的优先级更高
- 样式指向同一元素,权重规则生效,权重大的被应用
- 样式指向同一元素,权重规则生效,权重相同时,就近原则生效,后面定义的被应用
- 样式不指向同一元素时,权重规则失效,就近原则生效,离目标元素最近的样式被应用
- 层次选择器不改变优先级
优先级是由 A 、B、C、D 的值来决定的,其中它们的值计算规则如下:
- 如果存在行内样式,那么
A = 1
,否则A = 0
; - B 的值等于
ID选择器(#id)
出现的次数; - C 的值等于
类选择器(.class)
和属性选择器(a[href^="https"])
和伪类(:first-child)
出现的总次数; - D 的值等于
标签选择器(h1,a,div)
和伪元素(::before,::after)
出现的总次数。
从左至右比较,如果是样式优先级相等,取后面出现的样式。
补充说明
其他的情况测试在上面的参考链接中大都有提