用来选择某个元素的第一个子元素。
//输入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不支持)