如何为非<pre>元素后代的<span>元素应用指定样式？

你之前使用的:not(pre) span之所以无效，核心原因是这个选择器匹配的是父元素不是<pre>的<span>——但<pre>内部的<span>，其上层祖先（比如<body>）并不是<pre>，所以该选择器依然会选中它，导致所有<span>都被应用样式。

下面提供几种可行的解决方案：

方案1：全局设置后反向覆盖 #

这是最直观的实现方式，先给所有<span>设置目标样式，再将<pre>内部的<span>样式重置为默认：

/* 给所有span设置红色 */
span {
  color: red;
}

/* 重置pre内部的span样式 */
pre span {
  color: initial; /* 或使用inherit继承父元素颜色，或指定你需要的默认色 */
}

方案2：精准匹配非pre的直接子元素span #

如果你的目标<span>都是直接作为非<pre>元素的子元素，可以使用子组合器缩小范围：

:not(pre) > span {
  color: red;
}

注意：这个方案仅对直接嵌套在非pre元素下的span生效，无法处理多层嵌套的情况（比如<div><span>...</span></div>）。

方案3：排除pre后代的span（最全面） #

想要覆盖所有不属于<pre>后代的<span>，可以直接用否定选择器排除目标范围：

span:not(pre span) {
  color: red;
}

这个选择器的逻辑是：选中所有<span>元素，但排除那些是<pre>后代的<span>，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Denis Bitouzé