:not CSS 选择器不适用于跨度内的跨度中的 class

Question

我遇到了一个非常简单的问题。 :not 选择器不适用于归因于另一个跨度内的跨度的 class（无空格）。但是，当 spaceless class 在其父 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 有 color: #FFF 鉴于它是如何 class 无空间的（ :not 选择器应该排除在外）？这对我来说没有意义。即使在 Fiddle 中，此代码也不起作用。有谁知道我为什么以及如何解决它？如果有任何帮助，我将不胜感激！

Answer 1

它们都有颜色 #fff 这可能是由于您的其他代码它们没有，但 here is a reference 也

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

.darken:not(.spaceless)

表示是否匹配

<div class="darken">

不匹配

<div class="darken spaceless">

所以预期的行为是它们都具有颜色 #fff 因为选择器的 :not() 部分根本没有做任何事情并且内部元素从 .darken 元素

Answer 2

.darken:not(.spaceless) 适用于具有“变暗”class 的所有元素，但是， 不[=38] =] 有 .spaceless class.

要解决您的 .spaceless 元素，正确的选择器应该是 .darken .spaceless （请注意 .spaceless 之前的 space 表示 child 元素关系。

所以 .darken:not(.spaceless) 适用于您示例中的两个文本，并且 .darken :not(.spaceless) 适用于其中的 none - 那一个将适用于 children of [=19] =] 没有 .spaceless class.

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

.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>

:not CSS 选择器不适用于跨度内的跨度中的 class

:not CSS selector doesn't work for class in span within a span

html

css

css-selectors