簡單的令人振奮的事情； 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/

編輯：

問題是：

如何定位頁面上的所有<li>，除了.doc-view容器中的那些？

Answer 1

這是因為它們含義不同。 讓我們從CSS開始。

li:not(.doc-view li) 

這意味着選擇所有列表項，但不選擇那些具有子類的后代，這些子類具有帶有列表項后代的doc-view類。 您的代碼沒有這些，加上只允許將簡單的選擇器與:not() ，因此選擇器仍然無效。

現在使用jQuery。

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

這表示選擇所有列表項，但在該集合中不包括帶有doc項的帶有列表項后代的任何元素。 之所以有效，是因為它首先選擇了所有列表項，然后刪除了適合:not(.doc-view li)選擇器的匹配元素組。

Answer 2

CSS選擇器！= jQuery選擇器。

jQuery使用Sizzle CSS選擇器引擎 。

嘗試：

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;
}

參見工作jsFiddle演示