Question

CSS选择器：not（）无效，jQuery ：不。考虑这个结构：

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

编辑：

问题是：

如何定位页面上的所有＆lt; li＆gt;，除了.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)选择器的匹配元素组。

Answer 2

CSS选择器！= jQuery选择器。

jQuery uses Sizzle CSS selector engine

尝试：

ul > li {
    color:green;
}

<强> DEMO

Answer 3

由于.doc-view位于div，您需要使用div上的否定，然后访问li。

所以纯CSS解决方案是：

ul > li {
   color: red;
}

div:not(.doc-view) > ul > li {
   color:green;
}

<强> See working jsFiddle demo

简单的令人兴奋的事情; CSS选择器与jQuery选择器

3 个答案: