CSS元素选择器优先级问题：如何实现元素自动继承颜色

问题根源 #

全局的 h1, p { color: #000; } 是直接给<p>标签设置了颜色样式，而父元素.section-main--content设置的color是通过继承传递给子元素的。继承样式的优先级低于直接给元素设置的样式，所以<p>标签会优先使用全局的黑色，而非继承父元素的白色。

方案一：调整全局样式（推荐） #

把直接指定标签的全局样式改成给<body>设置默认颜色，这样没有单独设置颜色的元素都会自动继承这个默认值，后续给父元素设置颜色时，子元素就能正常继承：

body { color: #000; } /* 替换原来的h1,p{color: #000;} */

:root{
--modern-white: #fff;
}

.section-main {
  & .container .section-main--content  {
    color: var(--modern-white);
  }
}

这样<section-main--content>下的<h1>和<p>都会自动继承白色，不需要逐个指定标签。

方案二：强制子元素继承父元素颜色 #

如果必须保留全局的h1, p样式，可以给目标容器下的所有子元素添加强制继承的规则，覆盖它们的单独样式：

h1, p{color: #000;}

:root{
--modern-white: #fff;
}

.section-main {
  & .container .section-main--content  {
    color: var(--modern-white);
    /* 让所有子元素强制继承颜色 */
    * { color: inherit; }
  }
}

这里的*是通配符选择器，匹配容器下的所有子元素，让它们强制继承父元素的color值，从而覆盖全局的标签样式。

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