层级选择器（Descendant Selector）

如果两个DOM元素具有层级关系，就可以用 $('ancestor descendant') 来选择，层级之间用空格隔开。例如：

<!— HTML结构 —>

<div class="testing">

<ul class="lang">

<li class="lang-javascript">JavaScript</li>

<li class="lang-python">Python</li>

<li class="lang-lua">Lua</li>

</ul>

</div>

要选出JavaScript，可以用层级选择器：

$('ul.lang li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]

$('div.testing li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]

因为 &lt;div&gt; 和 &lt;ul&gt; 都是 &lt;li&gt; 的祖先节点，所以上面两种方式都可以选出相应的 &lt;li&gt; 节点。

要选择所有的 &lt;li&gt; 节点，用：

$('ul.lang li');

这种层级选择器相比单个的选择器好处在于，它缩小了选择范围，因为首先要定位父节点，才能选择相应的子节点，这样避免了页面其他不相关的元素。

例如：

$('form[name=upload] input');

就把选择范围限定在 name 属性为 upload 的表单里。如果页面有很多表单，其他表单的 &lt;input&gt; 不会被选择。

多层选择也是允许的：

$('form.test p input'); // 在form表单选择被<p>包含的<input>