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

计算规则