为何!important规则不生效，样式反而被指定选择器覆盖？

原因拆解 #

核心逻辑基于两个CSS基础规则：

1. !important 仅提升直接作用在当前元素上的同属性规则的优先级，不会跨元素生效，也不会改变继承属性的优先级排序。
2. 任何直接匹配目标元素的CSS规则，优先级都高于从父级元素继承来的属性，无论父级属性是否带!important。

对应场景的具体分析：

• 最终渲染文本的承载元素是内层的<span>标签，它是样式生效的目标元素。
• .cat-title h2 span 是直接匹配该内层span的规则，设置的font-size:11px属于直接命中目标元素的规则。
• .cat-title h2 的作用对象是h2元素，即使加了!important，该font-size规则也仅对h2自身生效，对于内层span而言属于继承属性，优先级远低于直接命中span的11px规则，因此最终文本字号为11px。

补充：元素同属性的优先级排序（从高到低） #

• 元素行内样式带!important
• 样式表中直接匹配该元素的规则带!important
• 元素行内样式不带!important
• 样式表中直接匹配该元素的规则（按选择器优先级排序）
• 从父级继承的属性（无论父级属性是否带!important）

内容的提问来源于stack exchange，提问作者Joshua Fleuri