不明白html 5 的CSS3选择器中的:first-child和:last-child是干什么用的?

html-css020

不明白html 5 的CSS3选择器中的:first-child和:last-child是干什么用的?,第1张

:first-child和:last-child

用来选择某个元素的第一个子元素。

//输入ul li:first-child

//输入ul li:last-child

刚刚有个这方面的视频,视频的系列名称叫做 《Buid New World》 里面的第八集是讲CSS3 选择器的,有机会看看吧

下面写个例子来获取id为demo的元素的第一个子元素。

<!--加载jquery-->

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script>

$(function(){//页面加载完成时进入

    var firstChild=$("#demo>:first")//用选择器的方式获取第一个子元素

    firstChild.css('color','red')//将第一个子元素中的文字变为红色,可以看到只有“111”是红色的

})

</script>

<div id="demo"><span>111</span><span>222</span><span>333</span></div>

说明一下以上例子中用到选择器

#demo是id选择器获取id为demo的元素

>是子选择器获取所有子级

:first是首项选择器获取第一个元素

三者结合起来就是获取id为demo的元素的所有子元素中的第一个元素。

其实jquery的选择器有很多,包括:

:last获取最后一个元素

:eq(index)获取第index个选择器

更多可以直接百度搜索“jquery选择器”来查看。

请参照 css3 伪类选择器;

:first-child

选择某个元素的第一个子元素(IE6不支持)

:last-child

选择某个元素的最后一个子元素

:first-of-type

[CSS3]选择一个上级元素下的第一个同类子元素

:last-of-type

[CSS3]选择一个上级元素的最后一个同类子元素

:only-child

[CSS3]选择的元素是它的父元素的唯一一个了元素(IE6-8不支持)

:only-of-type

[CSS3]选择一个元素是它的上级元素的唯一一个相同类型的子元素(IE6-8不支持)

:nth-child()

[CSS3]选择某个元素的一个或多个特定的子元素(IE6-8不支持)

:nth-last-child()

[CSS3]选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算(IE6-8不支持)

:nth-of-type()

[CSS3]选择指定的元素(IE6-8不支持)

:nth-last-of-type()

[CSS3]选择指定的元素,从元素的最后一个开始计算(IE6-8不支持)