jQuery中层级元素 ul li与ul>li的区别

这是jQuery中的两个层级选择器

<ul>
  	<li>12
        <ol>
            <li>33</li>
        </ol>
    </li>
    <li>12</li>
    <li>12</li>
</ul>
$(function() {
   $('ul>li').css('color', 'blue');
   $('ul li').css('color', 'blue');
   //这两个方式都能使ul里面的所有元素变蓝
    console.dir($('ul>li'));
    console.dir($('ul li'));
    
})

那既然都可以选中ul里面的li但是他们的区别在哪呢？
其实差别就在他们返回的伪数组长度

控制台显示的数组长度是3，只包括3个子元素 li 不包括第一个 li 里面的元素

console.dir($('ul>li'));

控制台显示的数组长度是4，只包括 ul 里面的所有元素

console.dir($('ul li'));