CSS样式疑问：.test的text-decoration未覆盖继承样式，color却生效？

这跟优先级无关，核心是**text-decoration和color的渲染逻辑完全不同**：

1. color的正常继承与覆盖 #

color是标准可继承属性，父元素的颜色会传递给子元素，但子元素的直接样式（比如.test的color: #444）优先级远高于继承值——这就是color能正常生效的原因，子元素的类选择器直接定义了自身颜色，完全覆盖继承来的橙色。

2. text-decoration的特殊表现 #

text-decoration本身是不可继承属性，但浏览器有特殊规则：父元素设置的文本装饰（比如underline）会"延伸"到子元素的文本内容上，看起来像继承，但本质是父元素的装饰效果覆盖了子元素文本区域。

按你提供的代码，.test设置text-decoration: none应该能覆盖这个效果，没生效大概率是以下原因：

• 存在更具体的CSS选择器（比如.side-panel__sub-container .test）覆盖了.test的设置，这类选择器优先级更高
• 浏览器缓存了旧样式，尝试强制刷新页面（Ctrl+F5）

排查验证 #

临时给.test加!important测试（仅用于排查，不要长期使用）：

.test {
    color: #444;
    text-decoration: none !important;
}

如果生效，说明是优先级冲突；如果还是不生效，检查HTML结构是否正确，确认.test的<p>标签确实嵌套在目标父元素内。

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