当前位置:Gxlcms > html代码 > 关于first-child的一个小知识点

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

时间:2021-07-01 10:21:17 帮助过:64人阅读

今天在看《锋利的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了!

额。。。这细节。。。。以后用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的一个小知识点的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行