关于first-child的一个小知识点-html教程-PHP中文网

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

零下一度

发布： 2017-06-24 13:58:49

原创

1720人浏览过

今天在看《锋利的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?1.1.11"></script>）

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

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

知了zKnown

知了zKnown：致力于信息降噪 / 阅读提效的个人知识助手。

额。。。这细节。。。。以后用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，额，看到被人写的文章，说的蛮清楚的，附上地址：

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

以上就是关于first-child的一个小知识点的详细内容，更多请关注php中文网其它相关文章！

大家都在看：