CSS - 伪类 :nth-last-of-type（）

CSS 伪类 :nth-last-of-type（）根据它们在相同类型的同级元素中的位置选择一个或多个元素，从最后一个开始计算。

语法


:nth-last-of-type( | even | odd) {
	 	/* ... */
}

可能的值

奇数 − 此值表示从末尾开始计数的系列中的所有奇数（例如，1,3,5..etc）同级元素。
偶数 − 此值表示从末尾开始计数的系列中的所有偶数（例如，2,4,6...等）同级元素。
函数表示法（<an+b>） − 此值表示从其父容器的末尾开始计数的序列中的每个 an+b 子元素，其中 a 是正整数，n 是从 0 开始的计数器变量。b 是另一个正整数。

CSS :nth-last-of-type（）示例

下面是一个示例，演示如何使用 :nth-last-of-type（） 选择器来设置从底部开始的第三个 p 元素的样式 -


<html>
<head>
<style>
	 	p:nth-last-of-type(3) {
	 	 	 background-color: pink;
	 	 	 color: blue;
	 	}
</style>
</head>
<body>
	 	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
	 	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
	 	<p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
	 	<p>The standard chunk of Lorem Ipsum used since the 1500s</p>
	 	<p>Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero</p>
	 	<p>Lorem Ipsum is therefore always free from repetition,</p>
</body>
</html>

下面是一个示例，说明如何以不同的方式设置奇数和偶数段落的样式 -


<html>
<head>
<style>
	 	p:nth-last-of-type(odd) {
	 	 	 background-color: pink;
	 	 	 color: blue;
	 	}
	 	p:nth-last-of-type(even) {
	 	 	 background-color: greenyellow;
	 	 	 color: red;
	 	}
</style>
</head>
<body>
	 	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	 	<p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
	 	<p>The standard chunk of Lorem Ipsum used since the 1500s</p>
	 	<p>Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero</p>
	 	<p>Lorem Ipsum is therefore always free from repetition,</p>
</body>
</html>

本页

CSS - 伪类 :nth-last-of-type（）

语法

可能的值

CSS :nth-last-of-type（） 示例

CSS :nth-last-of-type（）示例