关于代码 $("li:first-child") 的疑问
课程中讲到 $("li:first-child")是 获取每个父元素的 第一个字元素的集合 ，这句话的意思是否可以理解为 程序先找 到 每个 li 的父元素 ol，一共有两个父元素 ol。 然后再返回 每个 ol 的第一个子元素 li？
另外一种写法是否有必要这么写 $(ol li:first-child) 理解上更清楚那？
6 回答
主要是选择器的问题。
举个例子:$("div span")的意思是选择div元素里的所有span后代元素，包括子元素和孙元素
具体到这里，$("ol :first-child")意思是选择每个ol元素里的第一个子元素 这个写法跟$("ol li:first-child")是一样的。
至 于$("li:first-child")，如果在li的后面加上空格 ，就表示选择每个li元素里的第一个子元素 ,可是li里面已经没有子元素了。所以自然没有反应 。再来打个比喻 ，如果你在第一个li，也就是"芹菜"这个文本下用<p></p>标签，即<li><p>芹菜< /p></li>。那这样的$("li :first-child")就能跑了。
希望能够帮到你。
Keith.
我把body改为了：
<body>
<h3>改变每个"蔬菜水果"中第一行的背景色</h3>
<ol>
<li>芹菜</li>
<li>茄子</li>
<li>萝卜</li>
<li>大白菜</li>
<li>西红柿</li>
</ol>
<ol>
<li>橘子</li>
<li>香蕉</li>
<li>葡萄</li>
<li>苹果</li>
<li>西瓜</li>
</ol>
<ol>
<h2>桃子</h2>
<li>橘子</li>
<li>香蕉</li>
<li>葡萄</li>
<li>苹果</li>
<li>西瓜</li>
</ol>
<ul>
<li>橘子</li>
<li>香蕉</li>
<li>葡萄</li>
<li>苹果</li>
<li>西瓜</li>
</ul>
<script type="text/javascript">
$("ol :first-child").css("background-color", "green");
</script>
</body>
$("ol :first-child")：这个是橘子和桃子都有效果；
$("ol:first-child")：这个是没有任何效果；
$("li:first-child")：这个是除了有桃子的组外，所有的橘子都有效果;
$("ol li:first-child")：这个是只有前两组的橘子有效果；
如果不看$("ol:first-child")：这个是没有任何效果；这一条的话，这个选择器应该是：$("ol :first-child")选择所有ol下的第一个子元素。$("li:first-child")选择的是第一个子元素为li的父元素的第一个子元素。$("ol li:first-child")选择的是第一个子元素为li并且父元素为ol的父元素的第一个子元素。当然，这里面选择的结果是数组。
那么，为什么$("ol:first-child")会没有效果？
刚刚才发现，这是因为$("ol:first-child")是选择第一个子元素为ol的父元素的子元素合集。那么，这段代码里面，body是ol的父元素。但是body的第一个子元素却是h3。所以选择器没有挑选到符合条件的元素。只要把h3标签删除或移一个地方，就可以看到效果了。
举报
0/150
提交
取消
