权重
最后更新于
最后更新于
!important > 内联样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器
important: 无穷大
内联样式: 1000
ID: 100
类、伪类、属性: 10
元素、伪元素: 1
通配符: 0
权重计算时,每遇到一个选择器就加上相应的基数,总和大的认为权重更高。如下:
!important 优先级最高,但也会被权重高的important所覆盖
行内样式总会覆盖外部样式表的任何样式(除了!important)
单独使用一个选择器的时候,不能跨等级使css规则生效
如果两个权重不同的选择器作用在同一元素上,权重值高的css规则生效
如果两个相同权重的选择器作用在同一元素上:以后面出现的选择器为最后规则.
权重相同时,与元素距离近的选择器生效
选择器
表达式或示例
说明
权重
ID选择器
#aaa
100
类选择器
.aaa
10
标签选择器
h1
元素的tagName
1
属性选择器
[title]
10
相邻选择器
selecter + selecter
拆分为两个选择器再计算
兄长选择器
selecter ~ selecter
拆分为两个选择器再计算
亲子选择器
selecter > selecter
拆分为两个选择器再计算
后代选择器
selecter selecter
拆分为两个选择器再计算
通配符选择器
*
0
各种伪类选择器
如:link, :visited, :hover, :active, :target, :root, :not等
10
各种伪元素
如::first-letter,::first-line,::after,::before,::selection
1