选择器之间的区别答案

【问题标题】：Difference between selectors选择器之间的区别
【发布时间】：2014-03-07 20:34:37
【问题描述】：

我对这两个选择器感到困惑，因为它们执行相同的结果。所以我只想知道为什么我们应该使用> 选择器

$(function(){
$('ul > li').addClass('red')
$('ul  li').addClass('red')
})

HTML

<ul>
<li>a</li>
<li>b</li>
<li>C</li>
<li>d</li>
</ul>

【问题讨论】：

它们是完全不同的选择器......不，它们给出的结果不同。无论如何，这是一个非常基本的问题，我不敢相信你在发布这个问题之前没有找到任何信息......
你读过Child Selector (“parent > child”)
对不起，我已经更新了问题
我只是复制了同样的东西。我的问题有所不同
在提问之前至少谷歌一下

标签： jquery css

【解决方案1】：

> 用于选择元素的直接子元素。

例如：

<ul class="root">
    <li>a</li>
    <li>b</li>
    <li>
        <ul>
             <li>c</li>
        </ul>
    </li>
    <li>d</li>
</ul>

$('ul.root > li').addClass('red') 将向您的所有li 添加类red，除了嵌套在HTML 标记上方的另一个ul 中的li。

<ul>
    <li class="red">a</li>
    <li class="red">b</li>
    <li class="red">
        <ul>
             <li>c</li>
        </ul>
    </li>
    <li class="red">d</li>
</ul>

只要您的li 是ul.root 的孩子，$('ul.root li').addClass('red') 就会将 red 类应用于您的所有 li。

<ul>
    <li class="red">a</li>
    <li class="red">b</li>
    <li class="red">
        <ul>
             <li class="red">c</li>
        </ul>
    </li>
    <li class="red">d</li>
</ul>

【讨论】：

【解决方案2】：

<div id="MasterContainer">
   <div>   <!-- Level 1 -->
      <div>   <!-- Level 2 -->
      </div>
   </div>
   <div>   <!-- Level 1 -->
      <div>   <!-- Level 2 -->
      </div>
   </div>
</div>

场景：

// Will add class 'red' to both Level 1 and Level 2 divs.
$('#MasterContainer div').addClass('red');   

// Will add class 'red' to only Level 1 divs.
$('#MasterContainer > div').addClass('red');

// Will add class 'red' to only Level 2 divs.
$('#MasterContainer > div > div').addClass('red');

总而言之，当您想要将元素定位到特定的 HTML/DOM 级别时，'>' 通常非常有用。

【讨论】：