关于first-child的一个小知识点

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

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?1.1.11"></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，额，看到被人写的文章，说的蛮清楚的，附上地址：

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

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com