17 lines
1.6 KiB
Plaintext
17 lines
1.6 KiB
Plaintext
---
|
||
title: 什么是 CSS 选择器特异性以及它是如何工作的？
|
||
---
|
||
|
||
浏览器根据 CSS 规则的特异性来确定在元素上显示哪些样式。我们假设浏览器已经确定了与特定元素匹配的规则。在匹配的规则中，根据以下内容计算每个规则的特异性，四个逗号分隔的值 `a, b, c, d`：
|
||
|
||
1. `a` 是指是否使用了内联样式。如果属性声明是元素上的内联样式，则 `a` 为 1，否则为 0。
|
||
2. `b` 是 ID 选择器的数量。
|
||
3. `c` 是类、属性和伪类选择器的数量。
|
||
4. `d` 是标签和伪元素选择器的数量。
|
||
|
||
结果特异性不是单个数值分数，而是一个可以逐列比较的值数组。当比较选择器以确定哪个选择器的特异性最高时，从左到右查看，并比较每列中的最高值。因此，`b` 列中的值将覆盖 `c` 和 `d` 列中的值，无论它们可能是什么。因此，`0, 1, 0, 0` 的特异性将大于 `0, 0, 10, 10`。
|
||
|
||
在特异性相等的情况下：最新的规则是有效的规则。如果您在样式表中编写了相同的规则（无论内部还是外部）两次，那么样式表中较低的规则更接近要设置样式的元素，它被认为是更具体的，因此将被应用。
|
||
|
||
编写低特异性的 CSS 规则是一个更好的做法，这样如果需要，它们可以很容易地被覆盖。在编写 CSS UI 组件库代码时，重要的是它们具有较低的特异性，以便库的用户可以覆盖它们，而无需使用过于复杂的 CSS 规则，仅仅是为了增加特异性或求助于 `!important`。
|