木灵鱼儿

木灵鱼儿

阅读：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
文章分类 CSS
文章标签 css优先级计算规则
木灵鱼儿

木灵鱼儿

发布了 705 篇文章获得点赞 0获得阅读 210

版权申明

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

one
two
three

关于作者

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

相关文章

卷轴地图卷轴地图
尾调用优化尾调用优化
性能测试性能测试
生成器 Generator生成器 Generator
语法语法