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

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>

还有一点jQuery：

$('li:not(.doc-view li)').css('color','red');

如您所见，选择器是相同的。但是如果您使用JSFIDLE，您将看到，这是不同的。jQuery选择器以元素为目标，CSS不以元素为目标

编辑：

问题是:

---

如何定位页面上的所有

对象，除了.doc视图容器中的对象？

CSS选择器！=jQuery选择器

尝试：

---

这是因为它们的意思不同。让我们从CSS开始

li:not(.doc-view li) 

这意味着选择所有列表项，但不选择那些具有具有具有列表项子体的类文档视图的子体的列表项。您的代码没有这些选项，并且只允许与

：not（）

一起使用，因此选择器仍然无效

现在来看jQuery

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

---

这表示选择所有列表项，但不在该集合中包含具有列表项子体的类doc视图的任何元素。这是因为它首先选择所有列表项，然后删除符合

：not（.doc view li）

选择器的匹配元素组。

由于

.doc view

位于

div

上，您需要在

div

上使用否定，然后访问

li

因此，纯CSS解决方案是：

ul>li{
颜色：红色；
}
div:not（.doc view）>ul>li{
颜色：绿色；
}

---

谢谢你提出了一个像样的问题。问题是什么？@Quentin，更新。你现在可以回答吗？或者只是

.main>ul>li

？

。doc view

在

div

上，而不是

li

上，所以它总是正确的。我想我对CSS选择器有些了解。我们的目标不是针对特定的li元素，而是展示不同的equal选择器在jQuery和CSS中是如何工作的。但是谢谢你的回答。CSS不是这个意思。CSS无效。您只能在

：not（）

中使用简单的选择器@昆廷-啊，是的，尽管这里有一个简单的选择器，他仍然在比较苹果和橙子。@j08691回答得很好，谢谢！你知道，如何用纯CSS来回答我的问题吗？一个简单的解决方案是用一种样式来瞄准所有的lis，然后用一种单独的样式瞄准doc view div中的lis。在纯CSS中，您将无法使用单一规则以不同的方式针对它们。@j08691假设我无法访问.doc视图html和CSS。如果是这样，我应该使用jQuery来定位

s的外部.doc视图吗？

li:not(.doc-view li) 

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