:nth-last-child(n) 选择器匹配属于其元素的第 n 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。
注意:n 可以是数字、关键词或公式。
:nth-last-child(number)
{
CSS 样式
}
:nth-last-child(n)
:选中某个元素,该元素必须是某个父元素下的倒数第n个子元素;
p:nth-last-child(n)
:选中p元素,且该p元素必须是某个父元素下的倒数第n个子元素
注意:n是从父元素最后一位开始,从1算起。
如下代码:
p:nth-last-child(2)
选中两个div中的倒数第二个子元素p,例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web(Html5+Css3)</title>
<style>
p:nth-last-child(2)
{
color:green;
}
</style>
</head>
<body>
<div style="border:1px solid;width: 222px">
<span>div1 中span</span>
<p>div1 中第一个段落。</p>
<p>div1 中的最后一个段落。</p>
</div><br>
<div style="border:1px solid;width: 222px">
<p>div2 中第一个段落。</p>
<p>div2 中的最后一个段落。</p>
</div>
</body>
</html>
div1 中第一个段落。
div1 中的最后一个段落。
div2 中第一个段落。
div2 中的最后一个段落。
li:nth-last-child(n+6)
选中从倒数第6个开始的子元素
li:nth-last-child(-n+9)
选中从倒数第1个到第9个子元素中的所有元素。
:nth-last-child(n+4):nth-last-child(-n+8)
选中倒数第4-8个子元素间的所有元素。
/*奇数*/
:nth-last-child(odd)
/*偶数*/
:nth-last-child(even)
:nth-last-child(3n+1),
选择倒数1,4,7,10
nth-last-child(n+2):nth-last-child(odd):nth-last-child(-n+9)
将会选中的子元素是从倒数第2位到第9位,并且只包含奇数位。
表格中的数字表示支持该属性的第一个浏览器版本号。
Safari | Chrome | FireFox | IE |
1.0 | 1.0 | 1.0 | 5.0 |