规则概览

0级

通配选择器、选择符、逻辑组合伪类

通配选择器:

* {}

选择符:

+、>、~、空格、||

逻辑组合伪类:

:not() {}

:is() {}

:where() {}

:has() {}

1级

标签选择器

body {}

2级

类名选择器、属性选择器、伪类

类名选择器:

.foo {}

属性选择器:

[foo] {}

伪类:

:hover {}

:active {}

:focus {}

:focus-within {}

:focus-visible {}

:link {}

:visited {}

:any-link {}

:target {}

:target-within {}

:enabled {}

:disabled {}

:read-only {}

:read-write {}

:placeholder-shown {}

:default {}

:checked {}

:indeterminate {}

:valid {}

:invalid {}

:in-range {}

:out-of-range {}

:required {}

:optional {}

:user-invalid {}

:blank {}

:root {}

:empty {}

:first-child {}

:last-child {}

:only-child {}

:nth-child(n) {}

:nth-last-child(n) {}

:first-of-type {}

:last-of-type {}

:only-of-type {}

:nth-of-type(n) {}

:nth-last-of-type(n) {}

3级

id选择器

#app {}

4级

style内联

<p style="color: red;"></p>

5级

!important

.foo {
  color: #fff !important;
}

计算规则

选择器 计算值 计算规则
* {} 0 1个0级通配选择器,优先级数值为0
dialog {} 1 1个1级标签选择器,优先级数值为1
ul > li {} 2 2个1级标签选择器,1个0级选择符,优先级数值为 1+0+1
li > ol + ol {} 3 3个1级标签选择器,2个0级选择符,优先级数值为:1+0+1+0+1
.foo {} 10 1个2级类名选择器,优先级数值为10
a:not([rel=nofollow]) {} 11 1个1级标签选择器,1个0级否定伪类,1个2级属性选择器,优先级数值为1+0+10
a:hover {} 11 1个1级标签选择器,1个2级伪类,优先级数值为1+10
ol li.foo {} 12 1个二级类名选择器,2个1级标签选择器,1个0级空格选择符,优先级数值为1+0+1+10
li.foo.bar {} 21 2个2级类名选择器,1个1级标签选择器,优先级数值为10+10+1
#foo {} 100 1个3级ID选择器,优先级数值为100
#foo .bar p {} 111 1个3级id选择器,1个2级类名选择器,1个1级标签选择器,优先级数值为100+10+1
分类: CSS 标签: css优先级计算规则

评论

暂无评论数据

暂无评论数据

目录