Manuel Matuzovic 的 CSS 特异性演示

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

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

Screenshot of the CSS Specificity Demo.

掌握 CSS 特异性的一种方法是思考“什么胜过什么”或特异性的强度。Manuel Matuzovic 有 一个有用的交互式分步演示。您可以不断点击“添加选择器”按钮,显示的 CSS(以及应用于页面的 CSS)会随着应用于主体以更改background-color 的选择器强度不断增加而变化。最后,它会转向并非真正选择器的技巧,例如使用@keyframes 覆盖内容。

更多特异性练习

如果您喜欢最后的技巧,请查看 Francisco Dias 的 一场特异性之战!,这是我们几年前发表的一篇文章,其中进行了一场来回的样式之战,通过19个步骤“选择”相同的元素以重新设置其样式。CSS 有时很疯狂。

直接链接 →