29 lines
2.5 KiB
Plaintext
29 lines
2.5 KiB
Plaintext
---
|
||
title: 什么是 CSS 选择器特异性以及它是如何工作的？
|
||
---
|
||
|
||
当多个 CSS 规则可能应用于同一个 HTML 元素时，浏览器需要一种方法来决定哪个规则优先。这由 **CSS 级联** 决定，它考虑了重要性、内联样式、选择器特异性和源顺序。**选择器特异性** 是此过程的关键部分，它为每个选择器计算一个权重。
|
||
|
||
浏览器根据与元素匹配的 CSS 规则的 **特异性** 来确定要在元素上显示哪些样式。为每个规则计算特异性，以决定哪个规则优先。
|
||
|
||
## 如何计算特异性？
|
||
|
||
特异性算法基本上是一个由三个类别或权重组成的三个值 - ID、CLASS 和 TYPE - 对应于三种类型的选择器。该值表示每个权重类别中选择器组件的计数，并写为 `ID - CLASS - TYPE`。这三列是通过计算与元素匹配的选择器中每个选择器权重类别的选择器组件的数量来创建的。
|
||
|
||
1. **ID**：这是 ID 选择器的计数（例如，`#example`）。
|
||
2. **CLASS**：这是类选择器的计数（例如，`.my-class`）、属性选择器（例如，`[type="radio"]`）和伪类（例如，`:hover`）。
|
||
3. **TYPE**：这是类型选择器（元素名称，例如，`h1`、`div`）和伪元素（例如，`::before`）的计数。
|
||
|
||
当比较选择器以确定哪个选择器具有最高的特异性时，从左到右（ID，然后是 CLASS，然后是 TYPE）查看，并比较每列中的最高值。ID 列中的值将覆盖 CLASS 和 TYPE 列中的值，无论它们有多大。类似地，CLASS 列中的值将覆盖 TYPE 列中的任何值。例如，`1,0,0`（一个 ID）的特异性大于 `0,10,10`（十个类和十个类型）。
|
||
|
||
重要的是要记住，特异性是更广泛的 **CSS 级联** 的一部分。标记为 `!important` 的声明具有最高的优先级，其次是内联样式（使用 `style` 属性）。选择器特异性紧随其后。
|
||
|
||
在竞争规则之间 **特异性相等** 的情况下（不是内联或 `!important`），CSS 源顺序中 **最后** 出现的规则是有效的规则，并将被应用。
|
||
|
||
最好编写具有低特异性的 CSS 规则，以便在必要时可以轻松覆盖它们。在为 UI 组件库编写 CSS 时，重要的是样式具有较低的特异性，以便库的用户可以自定义它们，而无需使用过于复杂的选择器或求助于 `!important`。
|
||
|
||
## 参考
|
||
|
||
* [特异性 | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity)
|
||
* [特异性 | web.dev](https://web.dev/learn/css/specificity)
|