CSS中color属性是否会被间接子元素继承？设置不生效如何解决

核心结论 #

color属性本身默认支持跨层级继承，你遇到的情况不属于CSS原生规则的正常表现，本质是子元素的color属性被更高优先级的样式规则覆盖了。

你给出的代码原生运行时所有文本都应该显示为白色，出现仅父级文本生效的情况，优先排查两类场景：

• 存在全局/组件级的样式规则，给span、内层div等元素明确设置了固定color值：继承样式的优先级是所有样式规则中最低的，只要子元素自身有任意明确指定的color属性（内联样式、class样式、id样式均可），都会覆盖继承来的颜色。
• 项目引入了UI组件库、CSS-in-JS预设样式，这些内置样式给文本元素设置的color优先级更高，覆盖了继承值。

无需逐个给子元素加样式的解决方案 #

方案1：强制所有后代继承颜色（最快生效） #

给外层父元素新增样式规则，强制所有后代元素继承父级颜色：

/* 先给外层div加class名ngo-bar */
.ngo-bar,
.ngo-bar * {
  color: white !important;
}

对应你的React代码可以调整为：

export const NgoBar = () => {
    return (
        <div className="ngo-bar" style={{backgroundColor:"red", width: "55vw", margin:"auto"}}>
            Some text
            <div style={{display:"flex",flexDirection:"column",backgroundColor:"red", padding:"10px"}}>
                <span>Some different text</span>
                <span>From somewhere</span>
            </div>
            <div></div>
        </div>
    )
}

方案2：排查并移除覆盖规则（推荐，无副作用） #

打开浏览器开发者工具，选中未生效的span元素，查看「计算样式」面板的color属性，点击即可看到是哪条规则设置的color，把对应规则删除或调整优先级后，color的继承逻辑就会正常生效。

方案3：用CSS变量实现全局控制 #

如果需要经常修改该容器内的文本颜色，可以用CSS变量实现动态统一控制：

* {
  color: var(--text-color, inherit);
}

父元素设置变量即可批量修改所有后代文本颜色：

<div style={{--text-color: "white", backgroundColor:"red", width: "55vw", margin:"auto"}}>

你提到的运行效果如下：

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