CSS :not选择器在嵌套元素中失效问题咨询

使用:not选择器试图让.x-webkit下的<p>和<em>文本不显示红色，但实际这两个元素的文本还是意外变红，代码示例如下：

.x-webkit *:not(p):not(em) {
  color: red;
}

<div class="x-webkit">
  <div>red</div>
  <ul><li>red</li></ul>
  <div>
    <p>
      Not red<br>
      <strong>red</strong><br>
      <em>Not red</em>
    </p>
  </div>
  <div>red</div>
  <table><tr><td>red</td></tr></table>
</div>

问题原因 #

核心问题在于CSS继承特性和:not选择器的作用逻辑：

• .x-webkit *:not(p):not(em) 选中的是.x-webkit下所有不是<p>和<em>的元素，给这些元素设置红色文本。
• <p>和<em>本身没被这个选择器命中，但它们的父元素（比如包裹<p>的<div>）属于选中范围，而color是继承属性，子元素会默认继承父元素的颜色，最终导致<p>和<em>的文本也变成红色。

解决方案 #

方案1：先统一设置红色，再重置目标元素 #

先给.x-webkit下所有元素设置红色，再单独把<p>和<em>的颜色重置为默认值（或你需要的颜色）：

.x-webkit * {
  color: red;
}
.x-webkit p, .x-webkit em {
  color: initial; /* 也可直接指定颜色，比如 black */
}

方案2：限制选择器作用于直接子元素（避免后代继承） #

如果只需要.x-webkit的直接子元素里非<p>/<em>的元素变红，不影响深层后代，可以用直接子选择器>：

.x-webkit > :not(p):not(em) {
  color: red;
}

注意：这个方案只会让.x-webkit的直接子元素（比如顶级<div>、<ul>）变红，内部的<li>、<td>等不会继承红色，需根据实际需求调整。

方案3：彻底重置目标元素样式（谨慎使用） #

如果需要完全清除<p>和<em>的继承样式，可以用all: unset，但会清除所有默认样式，需要额外恢复必要的排版属性：

.x-webkit *:not(p):not(em) {
  color: red;
}
.x-webkit p, .x-webkit em {
  all: unset;
  /* 恢复必要样式示例 */
  font-family: inherit;
  line-height: 1.5;
  display: block; /* 恢复p的块级特性 */
}

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