如果您正在寻找 关于 CSS 特异性的入门指南,我们已经准备好了。如果您想抢先一步,也应该了解 CSS 层叠上下文。

掌握 CSS 特异性的一种方法是思考“什么胜过什么”或特异性的强度。Manuel Matuzovic 有 一个有用的交互式分步演示。您可以不断点击“添加选择器”按钮,显示的 CSS(以及应用于页面的 CSS)会随着应用于主体以更改background-color
的选择器强度不断增加而变化。最后,它会转向并非真正选择器的技巧,例如使用@keyframes
覆盖内容。
更多特异性练习
如果您喜欢最后的技巧,请查看 Francisco Dias 的 一场特异性之战!,这是我们几年前发表的一篇文章,其中进行了一场来回的样式之战,通过19个步骤“选择”相同的元素以重新设置其样式。CSS 有时很疯狂。
对于数学爱好者:CSS 特异性实际上只是一个 4 位无限进制数。
或者更精确地说:一个 5 位数,其中最低 4 位是无限进制,最高位是 2 进制(
!important
)。