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。