jQuery 教程
jQuery :nth-last-child() 选择器
选取属于其父元素的第三个子元素的 &p& 元素，从最后一个子元素开始计数：
$("p:nth-last-child(3)")
定义和用法
:nth-last-child(n) 选择器选取属于其父元素的不限类型的第 n 个子元素的所有元素，从最后一个子元素开始计数。
提示：请使用
选择器来选取属于其父元素的不限类型的第 n 个子元素的所有元素，从最后一个子元素开始计数。
:nth-last-child(n|even|odd|formula)
要匹配的每个子元素的索引。必须是一个数字。第一个元素的索引号是 1。
选取每个偶数子元素。
选取每个奇数子元素。
规定哪个子元素需通过公式 (an + b) 来选取。
实例：p:nth-last-child(3n+2) 选取每个第三段，从倒数第二个子元素开始。
尝试一下 - 实例
如何选取所有 &div& 元素的第一个子元素的 &p& 元素，从最后一个子元素开始计数。
如何使用公式 (an + b) 来选取不同的子元素，从最后一个子元素开始计数。
如何使用偶数和奇数来选取不同的子元素，从最后一个子元素开始计数。
p:nth-child(2)、p:nth-last-child(2)、p:nth-of-type(2) 和 p:nth-of-last-type(2) 之间的不同。
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码我们在写网站前台界面的时候，经常会写一些边框了，颜色了等等，很多人都遇到过想去除最后一个元素的样式属性，下面青岛星网跟大家分享：巧用CSS3里的last-child去除最后一个元素属性。
效果图如图所示的结构就是一个div ul li列表，代码结构如下&div&id=&imglist&&
&&&&&li&&/li&
&&&&&li&&/li&
&&&&&li&&/li&
&/ul&&/div&CSS样式如下#imglist&ul&li{border-bottom:1px&solid&#}这个样子会导致上图最后一个图片下面也出现一条下划线，跟边框底部的线条就重复了，就不美观了。这个时候我们怎么去除最后一个LI标签的下划线呢？看如下代码#imglist&ul&li:last-child{border:none}这个样子直接就把最后一个元素LI的下划线去掉了。扩展阅读： & 青岛星网温馨提醒：同理如果想去除第一个元素的属性用：first-child即可。
如果本文帮到了您，请分享到朋友圈或推荐给好友！
更多 CSS 相关推荐
网络编程 - 分类栏目> 问题详情
选择器中parent div:nth-child（2)表示什么（)A、匹配ID为parent 元素的第一个子元素B、匹配ID为p
悬赏：0&答案豆
提问人：匿名网友
发布时间：
选择器中#parent div:nth-child(2)表示什么()A、匹配ID为parent 元素的第一个子元素B、匹配ID为parent 元素的第二个子元素
您可能感兴趣的试题
1通过在团队中简历自己的信誉，可以促进自己与团队中其他成员之间的交流，这个过程涉及简历和保持信誉的问题。下列哪一项有助于这一方面的行为()A、态度灵活，并听取不同意见B、尊重他人C、通过你给出的回答，表明有专长D、可以信赖，并且坚定不移2项目经理和项目团队的沟通最好应该()A、通过日进度报表B、通过审批过的文字表格C、通过口头和书面交流D、通过正式的管理等级体制3目标冲突的两个部门共同完成可交付成果，为了最好地解决冲突地需求和目标，项目经理应该()A、对所有部门执行标准的质量控制过程B、定义要再项目中执行的标准冲突解决计划C、执行绩效量过程，以此对每个部门进行评估D、理解，记录并交流项目厉害关系者的利益和优先级4一位担任项目经理的同事请您帮助管理某个项目，您发现，由于这位同事的技能低于项目要求，故项目没有得到充分的管理，您应当做些什么?()A、在不告知顾客的情况下帮忙管理项目B、帮助管理该项目经理缺乏技能的项目领域C、阐明事情完全由该项目经理负责D、建议该项目经理与其顶头上司讨论问题
我有更好的答案
请先输入下方的验证码查看最佳答案
图形验证：
验证码提交中……
享三项特权
享三项特权
享三项特权
选择支付方式：
支付宝付款
郑重提醒：支付后，系统自动为您完成注册
请使用微信扫码支付(元)
支付后，系统自动为您完成注册
遇到问题请联系在线客服QQ：
请您不要关闭此页面,支付完成后点击支付完成按钮
遇到问题请联系在线客服QQ：
恭喜您！升级VIP会员成功
常用邮箱：
用于找回密码
确认密码：1049人阅读
HTML5+CSS3（34）
&& & & nth-child和nth-of-type都是CSS3中新增的伪类选择器,平心而论，平时使用nth-child比较多，有时碰到些出乎意料的情况，也是改完就算了，并没有深入研究，以至于在今天之前，我还蠢蠢的以为nth-of-type比nth-child要严格，毕竟人家有个type。
&& & & 大写的囧….
&& & & 好吧，我为自己的不求甚解惭愧下…
&& & &网上关于nth-child和nth-of-type区别的内容并不多，能查到的也不是很满意，可能大家都跟我一样不求甚解，也有可能是因为大家觉得这个知识点并不重要，因此就没有再深入研究。
&& & &合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下。
本文例子的基本代码如下:
&!DOCTYPE html&
charset="UTF-8"&
width: 50%;margin: auto;
,{list-style: none;}
border: 1px solid #008000;height: 30px;line-height:30px;text-indent: 10px;
margin: 10px auto;
class="box"&
&ul中的li标签&
&&p标签里面的span标签&&
&&&&后面的例子中，始终以此代码为标准，只增加CSS样式，DOM部分不变。
&&&&现在我们开始以实例来看不同伪类选择器所展现出来的效果:
1、:nth-child
.box :nth-child(2){
background:
效果如下：
我们在使用nth-child时，并没有在其前面指定类型，现在选中的是.box下的第二个子元素。
2、:nth-of-type.
.box :nth-of-type(2){
background:
选中的是第二P标签和第二个div标签。
结论1：在不指定类型时，nth-child(n)选中的是父元素下的第N个子元素。nth-of-type(n)选中的是父元素下的不同类型标签的第N个。
3、div:nth-chiid.
.box div:nth-child(2){
background:
效果如下：
没有元素被选中。
在试试看p:nth-child(2);
.box p:nth-child(2){
background:
效果如下：
选中的是.box的第二个子元素，这个子元素的标签是P。
4、div:nth-chiid.
.box div:nth-of-type(2){
background:
选中的是.box下的div标签的第二个子元素
结论2：ele:nth-child(n)要求不仅仅是第n个子元素，并且这个子元素的标签是ele。ele:nth-of-type(n)选择的是父元素下ele标签的第二个
5、nth-last-child(n)和nth-last-of-type(n)的用法和nth-child(n),nth-of-type(n)用法相同，唯一的区别是:nth-last-child(n)是倒数第n个元素.nth-last-of-type(n)是倒数第n个标签。
6、last-child
.box p:last-child{
background:
没有选中任何元素，因为父元素下最后一个子节点都不是P标签.
如果不指定元素类型:
.box :last-child{
background:
有三个元素被选中，因为这三个元素都是其上一层父元素下的最后一个子元素.
6、last-of-type
.box p:last-of-type{
background:
效果如下：
选中了父元素下P标签的最后一个。
.box :last-of-type{
background:
效果如下：
选中了父元素下不同类型标签的最后一个。
结论3：ele:last-child选中父元素下最后一个子元素，并且该子元素的标签必须为ele，否则一个都不选中。ele:last-of-type选中父元素下ele标签的最后一个.
7、ele:first-child、ele:first-of-type与ele:last-child、ele:last-of-type恰好相反.
&!DOCTYPE html&
charset="UTF-8"&
border-collapse: collapse;
border: 1px solid green;
border: 1px solid green;
padding: 10px 20px;
:nth-child(odd){
background: yellow;
class="myTable"&
&&Index&&Name&&
&&1&&apple&&
&&2&&orange&&
&&3&&lemon&&
&&4&&mango&&
&&5&&watermelon&&
&&6&&grape&&
相比大家都知道 :nth-child(2n)是选中偶数子元素
但是，如果我们想选中前6个子元素呢？
可以使用 nth-child(-n+6)
tbody tr:nth-child(-n+3){
background:
从第三个开始选中
tbody tr:nth-child(n+3){
background:
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：352263次
积分：45360
积分：45360
排名：第60名
原创：110篇
评论：103条
文章：98篇
阅读：311577
(2)(1)(1)(1)(4)(13)(4)(3)(4)(15)(7)(8)(18)(13)(16)(1)当我想要完美的使用:nth-child或者:nth-of-type的时候有点儿头晕。你越理解它们，就能写出越好的CSS规则！
在这些简单的&秘方&(实际上是表达式)中我将重复的使用一个简单的列表并随即选择数字。但是很明显很容易改变它们以获得类似的选择器。
:nth-child规定属于其父元素的第二个子元素的每个 p 的背景色：
p:nth-child(2)
background:#ff0000;
只选择第五个元素
li:nth-child(5){&color:}
要选择第一个元素，你可以使用:first-child，或者我相信你也可以改下上面的例子来实现。
选择除了前面的五个之外的所有元素
如果有超过10个元素，它将会选中超过5个。
只选择前面的5个
li:nth-child(-n+5){&color:}
从开始的那个，选择每第四个
&li:nth-child(4n-7) {&/* or 4n+1 */&color:}
选择奇数或者偶数
&li:nth-child(odd){&color:}&
&li:nth-child(even){&color:}
当然这里也有另外两种实现，你懂的&&神飞
选择最后一个元素
&li:last-child {&color:}
选择倒数第二个
&li:nth-last-child(2){&color:}
从这个例子可看出，上面那个例子也有第二种实现方法。
浏览器支持
有趣的是，:first-child 和:last-child被IE 7支持，但是知道IE9才支持剩下的选择器。如果你担心IE，可以使用Selectivizr。
下面介绍的是 nth-child() 的语法和用法：语法： :nth-child(an+b) 描述：伪类:nth-child()的参数是an+b
tr:nth-child(2n+1)
tr:nth-child(odd)
tr:nth-child(2n)
tr:nth-child(even)
第一种：简单数字序号写法:nth-child(number)直接匹配第number个元素。参数number必须为大于0的整数。例子：li:nth-child(3){background:}
第二种：倍数写法:nth-child(an)匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。例子：li:nth-child(3n){background:}
第三种：倍数分组匹配:nth-child(an+b) 与 :nth-child(an-b)先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号，此时匹配组内的第a-b个。例子：li:nth-child(3n+1){background:}li:nth-child(3n+5){background:}li:nth-child(5n-1){background:}li:nth-child(3n&0){background:}li:nth-child(&0n+3){background:}
第四种：反向倍数分组匹配:nth-child(-an+b)此处一负一正，均不可缺省，否则无意义。这时与:nth-child(an+1)相似，都是匹配第1个，但不同的是它是倒着算的，从第b个开始往回算，所以它所匹配的最多也不会超过b个。例子：li:nth-child(-3n+8){background:}li:nth-child(-1n+8){background:}
第五种：奇偶匹配:nth-child(odd) 与 :nth-child(even)分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。
&E:nth-last-child(n): 选择某个子元素，从最后一个数起
&E:nth-of-type(n): 选择某个某种类型的子元素
&E:nth-last-of-type(n): 选择某个某种类型的子元素，从最后一个符合条件的元素数起
&E:first-child: 选择第一个子元素（这个伪类在CSS2里就有）
&E:last-child: 选择最后一个子元素
阅读(...) 评论()}