Question

我正在学习jquery，我在两种情况之间感到困惑，这两种情况应该和我一样，但不起作用。

$('#selected-plays li:not(.horizontal)').addClass('sub-level');

$('li :not(.horizontal)').addClass('sub-level');

以上两行都表示同样的事情，因为所有li都是在课程中选择的播放，所以我认为输出应该相同，但背景颜色在它所覆盖的区域方面有所不同，下面是我的完整代码。请解释上面两个选择器之间的区别。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>

  <style>
  .horizontal
  {
    float:left;
    list-style:none;
    margin:10px;
  }

  .sub-level
  {
    background-color:#ccc;
  }

  </style>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
        $('#selected-plays>li').addClass('horizontal');
        $('#selected-plays li:not(.horizontal)').addClass('sub-level');
        $('li :not(.horizontal)').addClass('sub-level');
    });
  </script>
 </HEAD>

 <BODY>
  <ul id="selected-plays">
    <li>Comedies
        <ul>
            <li>As you like it</li>
            <li>All's well that ends well</li>
            <li>A midsummer night's dream</li>
            <li>Twelfth night</li>
        </ul>
    </li>

        <li>Tragedies
        <ul>
            <li>Hamlet</li>
            <li>Macbeth</li>
            <li>Romeo and Juliet</li>
        </ul>
    </li>

    <li>Histories
        <ul>
            <li>Henry IV</li>
                <ul>
                    <li>Part I</li>
                    <li>Part II</li>
                </ul>
            <li>Henry V</li>
            <li>Richar II</li>
        </ul>
    </li>


  </ul>
 </BODY>
</HTML>

Answer 1

两个选择器的行为都与您输入的一样......＃SPACE＆＃34;李在第二个后：

$('li :not(.horizontal)').addClass('sub-level');

Answer 2

li:not(.horizontal)

这是没有水平类的li元素。

li :not(.horizontal)

这是包含没有水平类的元素的li元素。

注意第二个选择器中li和:not之间的空格。

请解释2个相同jquery选择器的不同行为

2 个答案: