CSS :not()伪类未按预期生效的问题咨询与解决方案

为什么原来的选择器失效？ #

你用的:not(.theme) small、:not(.theme *) small这类选择器逻辑有误：

• :not(.theme) small匹配的是父元素没有.theme类的<small>，但.theme容器内的<small>，它的直接父元素（比如<p>、非.theme的嵌套<div>）往往不带有.theme类，所以这些父元素会被:not(.theme)命中，导致对应的<small>也被错误应用样式。
• :not(.theme *) small的逻辑更混乱，:not(.theme *)会匹配所有不是.theme后代的元素，然后找它们的<small>后代，但同样无法规避.theme内部非.theme父元素的情况。

正确实现方法 #

方案1：现代浏览器（支持CSS Selectors Level 4） #

使用small:not(.theme *)选择器，直接排除所有属于.theme后代的<small>元素：

代码示例

<!-- 非.theme后代的small -->
<div>
  <p>普通文本<small>普通small样式</small></p>
</div>
<div class="non-theme">
  <small>嵌套非theme容器里的small</small>
</div>

<!-- .theme后代的small -->
<div class="theme">
  <p>Theme文本<small>Theme里的small（不应该被样式影响）</small></p>
  <div class="non-theme-inside-theme">
    <small>Theme内嵌套非theme容器的small（不应该被样式影响）</small>
  </div>
</div>

/* 仅作用于非.theme后代的small */
small:not(.theme *) {
  color: red;
  font-weight: bold;
}

/* 对比：.theme内的small样式 */
.theme small {
  color: #666;
  font-weight: normal;
}

渲染结果

• 所有不在.theme容器（包括嵌套在.theme内的任何子容器）中的<small>：显示红色加粗字体
• .theme内的所有<small>（包括嵌套在.theme内的非.theme容器里的）：显示灰色常规字体，不会应用红色样式

方案2：兼容旧浏览器（包括IE） #

如果需要兼容不支持CSS Selectors Level 4的浏览器，采用先全局设置，再反向重置的方式：

/* 先给所有small设置目标样式 */
small {
  color: red;
  font-weight: bold;
}

/* 重置.theme后代的small样式为默认 */
.theme small {
  color: inherit;
  font-weight: normal;
}

这种方式兼容性拉满，逻辑简单易懂，适合所有浏览器环境。

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