DEV Community
·
如果您的CSS样式未被浏览器应用，最可能是CSS特指性的问题。
💡
原文英文，约700词，阅读约需3分钟。
📝
内容提要
CSS特指性决定了在多个选择器对同一属性赋予不同值时，浏览器应用哪个样式。特指性分为ID、类和元素三类，权重从高到低依次递减。内联样式权重最高，但可被!important覆盖。了解特指性对开发者非常重要。
🎯
关键要点
- CSS特指性决定了在多个选择器对同一属性赋予不同值时，浏览器应用哪个样式。
- 特指性分为ID、类和元素三类，权重从高到低依次递减。
- 内联样式权重最高，但可被!important覆盖。
- 了解特指性对开发者非常重要，尤其在处理多个CSS文件、定制模板和使用CSS框架时。
- 特指性通过为不同类型的选择器分配权重来工作，权重最高的选择器胜出。
- 特指性计算使用三列：ID、类和元素，左侧列权重最高，右侧列权重最低。
- 内联样式的特指性为1-0-0-0，强于ID、类或元素选择器。
- 使用!important可以覆盖内联样式，但被视为不良实践，应谨慎使用。
❓
延伸问答
什么是CSS特指性？
CSS特指性是浏览器决定在多个选择器对同一属性赋予不同值时，应用哪个样式的机制。
CSS特指性是如何计算的？
CSS特指性通过为ID、类和元素选择器分配权重来计算，权重从高到低依次为ID、类、元素。
内联样式的特指性如何？
内联样式的特指性为1-0-0-0，强于ID、类或元素选择器。
如何使用!important覆盖内联样式？
使用!important可以覆盖内联样式，但这被视为不良实践，应谨慎使用。
在什么情况下了解CSS特指性特别重要？
了解CSS特指性在处理多个CSS文件、定制模板和使用CSS框架时尤为重要。
特指性权重相同的选择器如何处理？
如果多个选择器权重相同，则使用最后声明的选择器样式。
➡️
