：not CSS 选择器不适用于跨度内的类

Question

我遇到了一个非常直接的问题。：not选择器不适用于归属于另一个跨度中某个跨度的类(无空间(。但是，当spaceless类在其父div中时，：not属性有效。

这是我的代码：

HTML:

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

CSS：

.darken {
background: #AAA;
}
.darken:not(.spaceless) {
color: #FFF;
}

输出：Test1和Test2都具有颜色：#FFF，并且都具有背景：#AAA。为什么Test1有颜色：#FFF，因为它是类无空间的(：not选择器应该排除它(？这对我来说没有意义。即使在Fiddle中，这个代码也不起作用。有人知道我为什么以及如何修复它吗？我非常感谢任何帮助！

Answer 1

它们都有颜色#fff这可能是由于您的其他代码没有，但这里也有的参考

:not选择器没有按您预期的方式工作。什么

.darken:not(.spaceless)

意味着它与匹配

<div class="darken">

它与不匹配

<div class="darken spaceless">

因此，预期的行为是它们都将具有颜色#fff，因为选择器的:not()部分根本不做任何事情，并且内部元素继承了来自.darken元素的颜色

Answer 2

.darken:not(.spaceless)适用于具有"；"变暗"；类，但是没有的.spaceless类。

要寻址.spaceless元素，正确的选择器应该是.darken .spaceless(注意.spaceless之前的空格表示子元素关系。

因此，在您的示例中，.darken:not(.spaceless)适用于这两个文本，而.darken :not(.spaceless)不适用于它们中的任何一个——这一点将适用于.darken的子代，这些子代不具有.spaceless类。

另请参阅下面的示例(请注意，后续规则可以覆盖以前的规则(

.darken {
background: #AAA;
}
.darken .spaceless {
color: green;
}
.darken:not(.spaceless) {
color: white;
}
.darken :not(.spaceless) {
color: red;
}

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