什么是 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。