javascript - 简单的令人兴奋的事情； CSS 选择器与 jQuery 选择器

Question

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 容器中的

？

Answer 1

这是因为它们的含义不同。让我们从 CSS 开始吧。

li:not(.doc-view li) 

这意味着选择所有列表项，但不选择那些具有带有列表项后代的文档 View 类的后代的列表项。您的代码没有这些，只有 simple selectors允许与 :not() 一起使用，因此选择器无论如何都是无效的。

现在是 jQuery。

$('li:not(.doc-view li)')

这表示选择所有列表项，但不在该集合中包含任何具有类 doc-view 和列表项后代的元素。这是可行的，因为它首先选择所有列表项，然后删除适合 :not(.doc-view li) 选择器的匹配元素组。