CSS 特异性

CSS 特异性是一个判断样式优先级的指标，在 CSS 中当多个规则应用在同一个元素上时，浏览器会根据特异性来确定哪个规则优先级更高。

特异性的计算方法

特异性的计算方法遵循以下规则：

1. 给 ID 选择器加 100 分，
2. 给 class、属性选择器、伪类加 10 分，
3. 给元素、伪元素加 1 分，
4. 具有相同特异性的时候，后声明的规则优先级更高。

举个例子：

h1             /* 1 */
header h1      /* 2 */
#header h1     /* 101 */
header .title  /* 12 */
article p.red  /* 21 */

优先级的应用

当规则存在特异性相同时，可以通过 !important 标记来提升其特异性，但应谨慎使用，应该尽量避免使用 !important 标记，因为它会使代码难以维护。

最好的做法是将规则书写的清晰明了，尽量避免使用通配符和后代选择器。如果还需要提高某个规则的特异性，可以尝试使用选择器嵌套或选择器组合等方法。

总结

特异性是 CSS 优先级的一个重要指标，虽然没有像继承和层叠这样的魔法，但在一些复杂的应用场景中特异性的问题仍然可能会出现。理解特异性的计算方法和应用场景，可以帮助我们写出更加清晰、易于维护的 CSS 代码。