两者效果一样，有什么区别
$("ol :first-child").css("background-color", "green");和
$("li:first-child").css("background-color", "green");
两者效果一样，有什么区别吗
指尖的力量
2015-11-09
6 回答
我把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
提交
取消
