CSS in Depth 学习笔记：用一张图理解 CSS 语句的优先级规则
最新回答
长发与酒
2026-01-14 21:39:17
CSS语句的优先级规则可以通过以下一张图进行理解：
冲突筛选规则图：
第一层：起源
- !important：标记了!important的CSS规则具有最高优先级，会覆盖其他所有规则。
第二层：针对性
- ID选择器：ID选择器的权重高于类选择器和标签选择器。
- 类选择器、属性选择器、伪类：这些选择器的权重低于ID选择器，但高于标签选择器。
- 标签选择器、伪元素：这些选择器具有最低的权重。
- 权重计算：ID选择器计为100，类选择器、属性选择器、伪类计为10，标签选择器、伪元素计为1。权重值越高的选择器优先级越高。
第三层：出现顺序
- 源代码顺序：当两条规则的起源和针对性都相同时，后出现的规则会覆盖先出现的规则。这一规则在没有使用!important且针对性相同时尤为重要。
注意： 内联样式：内联样式的优先级高于通过选择器定义的规则，但低于!important标记的规则。 继承和冲突筛选：CSS的继承和冲突筛选是两个不同的概念，不应混淆。继承是指样式从父元素传递给子元素，而冲突筛选是指当多个规则作用于同一元素时，如何确定哪个规则生效。
通过这张图，可以清晰地理解CSS语句在处理冲突时的优先级规则，从而更好地掌握CSS样式的应用。
热门标签
