CSS选择器:not()不起作用,而jQuery :not 不起作用。
考虑以下结构:
<div class="main">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div>
<div class="doc-view">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
这个简单的CSS:
li:not(.doc-view li) {
color:green;
}
还有一些jQuery:
$('li:not(.doc-view li)').css('color','red');
如您所见,选择器是相同的。但是,如果您使用jsFiddle,您会发现两者并不相同。 jQuery选择器定位元素,而CSS不定位。
http://jsfiddle.net/LL429/3/
编辑:
问题是:
除了在.doc-view容器中的
最佳答案
这是因为它们含义不同。让我们从CSS开始。
li:not(.doc-view li)
这意味着选择所有列表项,但不选择那些具有子类的后代,这些子类具有带有列表项后代的doc-view类。您的代码没有这些,加上
:not()
只允许使用simple selectors,因此选择器仍然无效。现在使用jQuery。
$('li:not(.doc-view li)')
这表示选择所有列表项,但在该集合中不包含带有列表项后代的doc-view类的任何元素。之所以有效,是因为它首先选择了所有列表项,然后删除了适合
:not(.doc-view li)
选择器的匹配元素组。