DEV Community
·
深入了解CSS特定性
💡
原文英文，约900词，阅读约需3分钟。
📝
内容提要
CSS样式的优先级由特定性决定，特定性用四个数字表示，分别对应内联样式、ID、类和元素。使用:is()时，特定性取决于列表中最具体的选择，而:where()的特定性始终为零，从而灵活控制样式优先级。
🎯
关键要点
- CSS样式的优先级由特定性决定，特定性用四个数字表示，分别对应内联样式、ID、类和元素。
- 类的样式优先于基础元素的样式，CSS会将类视为比元素更具体的选择。
- 特定性使用四个数字表示，格式为[内联样式, ID, 类, 元素]。
- 当两个样式应用于同一元素时，比较它们的特定性，特定性高的样式优先。
- 使用:is()时，特定性取决于列表中最具体的选择，而:where()的特定性始终为零。
- 使用:is()可以更清晰地编写复合选择器，而:where()则可以灵活控制样式优先级。
- 通过使用:where()，可以在不增加特定性的情况下应用样式规则。
❓
延伸问答
CSS特定性是如何计算的？
CSS特定性使用四个数字表示，分别对应内联样式、ID、类和元素，格式为[内联样式, ID, 类, 元素]。
使用:is()和:where()有什么区别？
:is()的特定性取决于列表中最具体的选择，而:where()的特定性始终为零。
为什么类的样式优先于元素的样式？
因为CSS将类视为比元素更具体的选择，因此类的样式优先于基础元素的样式。
如何提高CSS样式的特定性？
可以通过添加更多的类或使用内联样式来提高特定性，例如将样式改为[0, 1, 2, 2]或[1, 1, 1, 2]。
CSS特定性对样式应用有什么影响？
当多个样式应用于同一元素时，特定性高的样式将优先应用，从而影响最终的样式效果。
如何使用:where()来控制样式优先级？
使用:where()可以在不增加特定性的情况下应用样式规则，从而灵活控制样式优先级。
➡️
