本文内容根据 CSS Specificity 整理。
首先，根据优先级从高到低，分为以下三类：
A. ID 选择器（例如，#example）
B. 类选择器 (例如，.example)，属性选择器（例如，[type="radio"]）和伪类（例如，:hover）
C. 类型选择器（例如，h1）和伪元素（例如，::before）
接下来，我们要想查看一个选择器中各个优先级类别有多少个，使用 A-B-C 这个形式表示。例如：
- x-0-0：x 表示 ID 选择器的数量。
- 0-x-0：x 表示类、属性和伪类选择器的数量。
- 0-0-x：x 表示类型和伪元素的数量。
- *, +, >, ~：全局选择器没有值，当结合了其它选择器时，它们不会提升优先级。
- :not(x)：反选伪类选择器没有值，但是传递的参数会提升优先级。
示例
-
*-0-0-0 -
div-0-0-1 -
li > ul-0-0-2 -
.myclass-0-1-0 -
*.myclass-0-1-0
*全局选择器没有值 -
*[type:checkbox]-0-1-0 -
:only-of-type-0-1-0 -
li.myclass-0-1-1 -
li[attr]-0-1-1 -
li:nth-of-type(3n)~li-0-1-2 -
form input[type=email]-0-1-2 -
li.class:nth-of-type(3n)-0-2-1 -
input[type]:not(.class)-0-2-1 -
#myDiv-1-0-0 -
#myDiv li.class a[href]-1-2-2 -
#divitis #myDiv a-2-0-1 -
style=""-1-0-0-0 -
!important-1-0-0-0-0
最后两个都已经不按规则出牌了，明显超出 ID 选择器的优先级了，所以使用它们的时候需要慎重思考。
网友评论