简单的令人兴奋的事情； 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) 

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

现在是 jQuery。

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

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