CSS :not选择器对嵌套span中的spaceless类不生效问题求助

嘿，这个问题其实是对CSS否定选择器:not()的作用对象理解偏差导致的，我来给你拆解清楚：

为什么会出现这种情况？ #

你的CSS选择器 .darken:not(.spaceless) 选中的是本身带有.darken类，且本身没有.spaceless类的元素——也就是那个外层的<span class="darken">。

而color是CSS继承属性，父元素设置的颜色会自动传递给所有子元素（包括里面的<span class="spaceless">）。所以哪怕子元素有.spaceless类，只要父元素被.darken:not(.spaceless)选中并设置了color: #FFF，子元素就会继承这个白色，这就是Test1也变白的原因。

至于父级div带.spaceless时生效，是因为此时.darken:not(.spaceless)不会选中那个div（因为div本身有.spaceless类），所以整个容器都不会有白色文字，子元素自然也不会继承。

怎么解决？ #

我们换个思路，先给.darken下的所有内容默认设置白色，再单独把.spaceless的文本颜色改回默认值，这样逻辑更清晰，兼容性也更好：

<span class="darken"> <span class="spaceless"> Test1 </span> Test2 </span>

.darken { 
  background: #AAA;
  color: #FFF; /* 给父元素设置白色，所有子元素默认继承 */
}
.darken .spaceless { 
  color: initial; /* 覆盖继承，让.spaceless的文本恢复默认颜色 */
}

如果你一定要用:not()来实现，也可以直接针对.darken的子元素进行筛选，同时处理父元素里的直接文本节点：

.darken { background: #AAA; }
/* 选中.darken下的直接子元素，排除.spaceless */
.darken > *:not(.spaceless) {
  color: #FFF;
}
/* 选中没有.spaceless子元素的.darken，给里面的直接文本设置白色 */
.darken:not(:has(.spaceless)) {
  color: #FFF;
}

注意:has()伪类需要现代浏览器支持（旧版IE不兼容），所以第一种反向覆盖的方案更稳妥。

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