4

我想选择不是特定类的后代的跨度，我们称之为“否”。这是我的CSS：

div:not(.no) span{background-color:#00f;}

这是HTML

<div>
    <span>yes 1</span>
</div>
<div class="no">
        <span>no 1</span>
</div>
<div class="no">
    <div>
           <span>no 2</span>
    </div>
</div>

两个问题：

  1. 为什么我的 CSS 同时适用于 yes 1 和 no 2？

  2. 如果我切换到通用选择器，为什么整个事情都会中断？

    *:not(.no) span{background-color:#00f;}

这是 JSFiddle 中的代码：http: //jsfiddle.net/stephaniehobson/JtNZm/

4

3 回答 3

8

  1. 两个span元素的父div元素都没有 class no，无论其他祖先是否有它：

    <div> <!-- This is div:not(.no), pretty much a given -->
    <span>yes 1</span>
</div>

    <div class="no"> <!-- In this case, although this is div.no... -->
    <div>        <!-- ... this is div:not(.no)! -->
           <span>no 2</span>
    </div>
</div>

  2. and是htmland元素body的祖先div，在使用通用选择器时（或者更确切地说，在省略类型选择器时）满足。这会使您的所有元素都具有背景颜色。span*:not(.no)span

一种解决方案是使用子组合器将否定过滤器锚定到body元素，如果您的顶级div元素将始终是以下元素body：

body > div:not(.no) span { background-color: #00f; }

jsFiddle 演示

另一种解决方案是简单地使用覆盖样式。

于 2011-12-16T22:08:09.997 回答
4

BoltClock 是正确的。如果您像这样使用选择器，可能会更有意义：

选择 从其值不包含单词的元素 派生的任何span元素。
div
classno

span在您的示例中，每个选定的 s 实际上都是div从其class值不包含该单词的 a 派生而来no——事实上，它们中的第二个也是从其div值class包含该单词的 a 派生的事实no并不否定（哈！）前一个陈述。

有趣的是，我敢打赌，如果你将第二个no下移一个级别，第二个span仍然会匹配。CSS 没有元素接近的概念，所以任何祖先div都应该足以匹配选择器，无论它是否“更接近” span。

于 2011-12-17T03:26:47.397 回答
0

我认为最好的选择是将您的陈述分成2：

div span { background-color:#00f; }
.no span { background-color:#fff; }

你可以在这里看到效果：http: //jsfiddle.net/JHTqp/

于 2011-12-16T22:24:12.323 回答