木灵鱼儿

木灵鱼儿

阅读:210

最后更新:2022/11/28/ 21:56:03

css选择器优先级计算规则

规则概览

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;
}

计算规则

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

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 210

相关文章