名称 | 说明 | 举例 |
:nth-child(index/even/odd/equation) | 匹配其父元素下的第N个子或奇偶元素 ':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的! 可以使用: | 在每个 ul 查找第 2 个li: $("ul li:nth-child(2)") |
:first-child | 匹配第一个子元素 ':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素 | 在每个 ul 中查找第一个 li: $("ul li:first-child") |
:last-child | 匹配最后一个子元素 ':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素 | 在每个 ul 中查找最后一个 li: $("ul li:last-child") |
:only-child | 如果某个元素是父元素中唯一的子元素,那将会被匹配 如果父元素中含有其他元素,那将不会被匹配。 | 在 ul 中查找是唯一子元素的 li: $("ul li:only-child") |
注:
1、:nth-child(index)从1开始的,而eq(index)是从0开始的,就是说 $("ul li:nth-child(0)").css("color","red")是获取不到相匹配的元素,只能从1开始,即 $("ul li:nth-child(1)").css("color","red"),而eq(0)可以获得,同样都是获得第一个子元素
:nth-child(even)是获得偶数子元素,即第二个,第四个,第六个...,而:even则是从索引0开始,匹配第二个索引,第四个索引...,也就是第一个,第三个,第五个...,看上去貌似都是获得奇数项,同样:nth-child(odd)和:odd同样也是如此
2、 :first-child匹配每个父类的子元素,而:first则是匹配一个子元素, :last-child和last也是这样
3、only-child:匹配某个元素是父元素中唯一的子元素,就是说当前子元素是类中唯一的元素,则匹配!
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title >无标题页 </ title >
< script src ="../js/jquery-1.6.min.js" type ="text/javascript" ></ script >
< script type ="text/javascript" >
jQuery( function ($){
// $("ul li:first-child").css("color","red");
$( " ul li:first " ).css( " color " , " red " );
// $("ul li:last-child").css("color","red");
// $("ul li:nth-child(even)").css("color","red");
// $("ul li:odd").css("color","red");
})
</ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< ul >
< li >第一个元素 </ li >
< li >第二个元素 </ li >
< li >第三个元素 </ li >
< li >第四个元素 </ li >
< li >第五个元素 </ li >
< li >第六个元素 </ li >
</ ul >
< ul >
< li >第一个元素 </ li >
< li >第二个元素 </ li >
< li >第三个元素 </ li >
< li >第四个元素 </ li >
< li >第五个元素 </ li >
< li >第六个元素 </ li >
</ ul >
</ div >
</ form >
</ body >
</ html >