读《锋利的jQuery》中first-child时的一个细节

今天在看《锋利的jQuery》这书时，看到过滤选择器那一节。有个知识点引起了我的注意。

（我不用书里一模一样的代码做例子）举个简单的例子-代码：

1 <ul>
2     <li>第一个li</li>
3     <li>第二个li</li>
4     <li>第三个li</li>
5     <li>第四个li</li>
6 </ul>

如果要第一个li的颜色为蓝色，书里给出的方法为$("ul :first-child").css("color","blue");

（ps:我用的是在线引入的jQuery：<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>）

这时我的第一反应是$("ul :first-child")这句话选择的是ul吧，不是他儿子li。我现在网上找了下例子，发现大家普遍这情况下的写法是：$("ul li:first-child").

那么书上的写法是错的么？我在编辑器上试验了一下，发现也是对的，原来关键问题出现在$("ul :first-child")的ul后面有个空格！如果空格去掉的话就真的选择了ul了！

额。。。这细节。。。。以后用ul+空格好呢，还是ul li好呢，这个看需要了哈哈。毕竟$("ul :first-child")与$("ul li:first-child")相比还多了个li！条件更加苛刻了！改下例子

<ul>
     <p>lala</p>
     <li>第一个li</li>
     <li>第二个li</li>
     <li>第三个li</li>
     <li>第四个li</li>
</ul>

同样情况下，$("ul :first-child").css("color","blue")与$("ul li:first-child").css("color","blue")，前者lala变成蓝色了，后者没有效果，毕竟li不是第一个儿子（做不了太子哈哈）。

first-child和first-of-type，额，看到被人写的文章，说的蛮清楚的，附上地址：

http://www.cnblogs.com/xuan52rock/p/4416228.html

嗯，简单来说，前者说的是儿子的事，后者说的是同一元素组成一组，这组中第几个的事。加上我前面说的注意空格的情况就可以清楚了。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有