CSS3 结构性伪类选择器—nth-last-child(n)，十天精通CSS3教程-慕课网

CSS3 结构性伪类选择器—nth-last-child(n)

“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。

案例演示

选择列表中倒数第五个列表项，将其背景设置为橙色。

HTML代码：

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
  <li>item11</li>
  <li>item12</li>
  <li>item13</li>
  <li>item14</li>
  <li>item15</li>
</ol>

CSS代码：

ol > li:nth-last-child(5){
  background: orange;
}

演示结果：

任务

在CSS编辑第一行输入正确代码，修改列表倒数第五项的背景色为橙色。

?不会了怎么办: nth-last-child标签是否书写正确

问答
评论
笔记
代码

全部精华我要发布

如何实现前三个child变色，只能写3次吗？

最赞回答 / 慕前端9244148

我百度到了可以是li:nth-child(-n+3):nth-child(n+1){background:green;}

2 回答 598 浏览

2022-07-25

怎样用一个选择器实现789变一个样式

最新回答 / 慕妹5785238

ol >li:nth-child(-n+9):nth-child(n+7){background:green;}

3 回答 694 浏览

2022-08-28

伪类选择器（:nth-last-child）不规则的选择有没有公式？

已采纳回答 / qq_传说哥_0

这种可以生效，简便的我也想知道.wrapper p:nth-last-child(1),p:nth-last-child(2),p:nth-last-child(3){ background: orange;}

2 回答 1402 浏览

2021-11-25

这里nth 是什么的简写方便记忆

最赞回答 / kyrix

n序数，th是英语序数词的后缀，第n个的意思。

3 回答 1721 浏览

2019-09-03

有 nth-last-child(n)，为何没有nth-first-child(n) ？

最赞回答 / 黑店老板

楼上答非所问，首先:first-child后面是没有括号的，其次，:first-child 意思是选择父元素的第一个子元素的元素E。楼主问题的解答应该是：你所想要的 nth-first-child(n)这个功能其实就是：nth-child(n) 你可以自己试试，比如li:nth-child(3).

3 回答 3355 浏览

2019-04-17

n 的取值问题

最新回答 / 浪迹天涯一

是的，数字必须是整数；但是表达式也是可以的，如：n,2n,2n+1等。只不过表达式的用法与nth-child()不太一致。

2 回答 1031 浏览

2016-08-23

:nth-last-child(n) 从某父元素的最后一个子元素开始计算

+ 我来回答回答最高可+2积分

2 回答 800 浏览

2022-05-25

题目错的……倒数第五行

最新回答 / 木风627

那是上面的例子

1 回答 625 浏览

2016-08-23

over
ol > li:nth-last-child(5){
background: orange;
}
过了！

+ 我来回答回答最高可+2积分

1 回答 674 浏览

2022-04-09

ol > li:nth-last-child(3){
background: orange;
}

(n+)
(-n+x)
(x)
这些都试过了，怎么还是说我没使用 nth-last-child 求这题如何过！

最新回答 / 精慕门6450554

判断你的答案是不是对的不是人是程序，我的理解是这样的，先获取你的答案再跟标准想比较如果不一致就抛出错误问题是叫你设置倒数第五项应该是nth-last-child(5) 你的是 nth-last-child(3) 所以就抛出错误了，你只要明白抛出错误就好了不要纠结这个错误的提示文字是什么，因为还可以正确弹出今天星期二错误弹出我今年20岁了

1 回答 758 浏览

2016-09-08