如何通过外层div内联样式覆盖p标签特异性，将文本改为蓝色？

为什么你的方法无效？ #

直接给p标签设置的color: green属于直接作用于元素的样式，优先级远高于从父元素div继承来的样式——哪怕你给div加了!important也没用，因为!important只能提升当前规则的优先级，但继承的样式本身就不具备和直接作用于元素的样式竞争的权重。

可行解决方案 #

如果你的场景是通过外层div统一控制WYSIWYG生成的文本颜色，推荐用**CSS自定义属性（变量）**的方式，只需修改一次全局样式，之后就能通过div的内联样式灵活控制：

1. 修改全局样式，让p标签的颜色优先使用自定义属性，默认保留绿色：

p {
  color: var(--text-color, green);
}

2. 在外层div的内联样式中定义这个自定义属性：

<div style="--text-color: blue;">
  <p>hello</p>
</div>

这样所有在这个div内的p标签都会自动应用蓝色，其他未设置该属性的p标签仍保持绿色。

关于降低p标签的特异性 #

p选择器的特异性已经是最低等级（仅元素选择器，特异性值为0,0,0,1），没法再降低了。要让父元素的样式能影响子元素，核心是避免子元素被直接设置固定的样式——自定义属性的方式刚好绕开了这个问题，既保留了默认样式，又能通过父元素灵活覆盖。

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