javascript - $('ul li:gt(0) span:first').css('color', 'red')..

Question

<ul>
    <li><span>1</span><span>2</span></li>
    <li><span>11</span><span>22</span></li>
    <li><span>111</span><span>222</span></li>
</ul>

结构就这样. 我认为匹配的应该是 ‘11’ ‘111’。 但结果是‘11’。 很纳闷不解。

然后换成

$('ul li:gt(0)').each(function(){
    $(this).find('span:first').css('color', 'red');
});

可行。

求解为什么选择器不行.

Answer 1

选择器改成这样：$('ul li:gt(0) span:first-child').css('color','red');

$('ul li:gt(0) span')返回的结果集是span,$('ul li:gt(0) span:first')只是选择结果集中的第一个。即$('ul li:gt(0) span:first').length是1，而a b:first-child的含义是每一个a的子元素中，第1个与b匹配的元素，所以$('ul li:gt(0) span:first-child').length是2。

Answer 2

首先,你的选择器$('ul li:gt(0) span:first')选取到只是<span>11</span>.
把你的选择器拆分来看就很清楚了:
首先$('ul li:gt(0)')这个是选取了ul下第1个li以后的所有li,即

<li><span>11</span><span>22</span></li>
<li><span>111</span><span>222</span></li>

从这里可以看出,里面是包含着4个span的.
所以你后面的span:first只是选取到了第一个span,即

<span>11</span>

see?

Answer 3

分开吧：

第一步：大于 0 的 li

$('ul li:gt(0)')

结果：

<li><span>11</span><span>22</span></li>
<li><span>111</span><span>222</span></li>

第二步：大于 0 的 li，在结果中匹配 span

$('ul li:gt(0) span')

结果：

<span>11</span><span>22</span><span>111</span><span>222</span>

第三步：大于 0 的 li，在结果中匹配 span，在结果中匹配第 1 个

$('ul li:gt(0) span:first')

结果：

<span>11</span>

好像没有什么不对啊？

Answer 4

你选择器写的有问题