:nth-last-of-type() 伪类根据元素的索引从最后一个元素向上选择元素。
The:nth-last-of-type() 可以由数字、关键字或者公式指定。
:nth-last-of-type() 伪类与 :nth-of-type() 类似，但有一个区别：它从末尾开始计数，而 nth-of-type 从头开始计数 .
这个伪类也类似于 :nth-last-child ，但有一个区别：它更具体。
:nth-last-of-type 仅针对与类似兄弟姐妹相关的排列中的某种元素。
语法
:nth-last-of-type() {
css declarations;
}
:nth-last-of-type() 伪类示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
p:nth-last-of-type(3) {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:nth-last-of-type() selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
</body>
</html>
带有“奇数”和“偶数”的 :nth-last-of-type() 伪类示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
p:nth-last-of-type(odd) {
background: #1c87c9;
color: #eeeeee;
}
p:nth-last-child(even) {
background: #666666;
color: #eeeeee;
}
</style>
</head>
<body>
<h2>:nth-last-of-type selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
</body>
</html>
带有公式 (an + b) 的 :nth-last-of-type() 伪类示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
p:nth-last-of-type(3n+0) {
background: #767fea;
padding: 10px;
color: #ffffff;
}
</style>
</head>
<body>
<p>第一段。</p>
<p>第二段。</p>
<p>第三段。</p>
<p>第四段。</p>
<p>第五段。</p>
<p>第六段。</p>
<p>第七段。</p>
<p>八段。</p>
<p>第九段。</p>
</body>
</html>
日期：2020-06-02 22:14:40 来源：oir作者：oir