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容器中的
  • 之外,如何定位页面上的所有
  • 最佳答案

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

    li:not(.doc-view li)
    

    这意味着选择所有列表项,但不选择那些具有子类的后代,这些子类具有带有列表项后代的doc-view类。您的代码没有这些,加上:not()只允许使用simple selectors,因此选择器仍然无效。

    现在使用jQuery。
    $('li:not(.doc-view li)')
    

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

  • 10-07 19:05
    查看更多