DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分！
:last-of-type 选择器允许您定位元素在其容器内的最后一个出现。 它在 CSS 选择器级别 3 规范 中定义为“结构伪类”，这意味着它用于根据其与父级和同级内容的关系来设置内容样式。
假设我们有一篇文章，包含标题、几个段落和一张图片。
<article>
<h1>A Title</h1>
Paragraph 1.
Paragraph 2.
Paragraph 3.
<img src="...">
</article>我们想让最后一个段落变小，以充当内容的结论（例如编辑说明）。 而不是为它提供一个类，我们可以使用 :last-of-type 来选择它。
p:last-of-type {
font-size: 0.75em;
}使用 :last-of-type 与 :nth-child 非常相似，但有一个关键区别：它 不太具体。 在上面的示例中，如果我们使用 p:nth-last-child(1)，将不会发生任何事情，因为该段落不是其父级（
:last-of-type 的强大功能：它以与类似同级的关系，而不是所有同级的方式定位特定类型元素的特定排列。
以下更完整的示例演示了 :last-of-type 和一个相关的伪类选择器 :first-of-type 的使用。
其他资源
浏览器支持
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 有效 | 3.2+ | 有效 | 9.5+ | 9+ | 有效 | 有效 |
:last-of-type 在 CSS 选择器模块 3 中引入，这意味着旧版本的浏览器不支持它。 但是，现代浏览器支持非常完美，并且新的伪选择器在生产环境中被广泛使用。 如果您需要更旧的浏览器支持，请 为 IE 使用 polyfill，或者使用渐进增强的方式在非关键情况下使用这些选择器，这是推荐的做法。
我发现这一点很奇怪：.myClass:last-of-type 不起作用，而 .myClass:first-of-type 却可以工作！我想知道为什么他们没有保持一致（Chrome 版本 28.0）
奇怪 - 我被绊倒了！这实际上似乎按预期工作。不知道是什么导致了我的早期问题。
我遇到了同样的问题。您确定这是个错误吗？或者可能是一个错误……
我也遇到过..
Chrome 31.0.1612
“last-of-type” 仅指元素，而不是属性……
Marcos 说得对，在 Chrome 中，当我引用一个类时，last-of-type 不起作用。谢谢！
谢谢！我对这个 CSS“技巧”有个模糊的记忆，不得不查看您的网站。结果！:)
看起来这些 *-of-type 选择器可能会被动态生成的元素（至少在 Chrome 中）插入父容器中而中断。例如，如果一些 js 代码将 div 插入父级，则您最初的 last-of-type 将会丢失对其所附加元素的跟踪。
太可惜了，“last-of-type” 实际上没有正确实现。
类型应该是
:last-of-type之前指定的类型，因此如果我有“.January”作为“类型”，那么“.January:last-of-type”应该命中具有“.January”类的最后一个出现的元素，但它没有（使用 Chrome 39.0.2171.95 (64 位)，OS X）。我刚开始上网页设计课，遇到了同样的问题。我该如何解决？
所以我测试了这一点，它似乎只适用于 HTML 元素，不适用于 类名，这很不幸。
规范中写道
所以做这样的事情是行不通的
但这样做会起作用
你错了。:last-of-type 在类名和 ID 上运行良好。您引用的规范中的“元素”一词不指“标签名”，它指“元素”。您如何选择该元素无关紧要。示例：https://jsfiddle.net/6cd83wb4/1/
@TylerH: 你错了
https://jsfiddle.net/6cd83wb4/2/
@TylerH @Jan Hartmann 好吧，你们俩在这个问题上都是对的，也是错的。这真是奇怪的行为，请耐心听我解释。
似乎使用带有 :last-of-type 的类会导致一些我只能描述为 *.class:first-of-class 的东西。那么这里究竟发生了什么？好吧，它确实将 last-of-type 绑定到 html 标签。无论是 div 还是 p 还是其他什么。但那个“最后一个”元素也必须具有 css 标签，这就是为什么 Jan 的例子不会导致任何突出显示，因为虽然它确实绑定到类，如在这个规则中使用类选择器应用于任何 html 元素，但实际的 :last-of-type 绑定到 html 标签，所以你不能使用同一个 html 标签有多个类并期望多个 :last-of-type 突出显示。
现在，这不会影响我，因为我正在编写 Web 组件，这意味着我的元素标签名称在很大程度上是唯一的，这意味着类选择器语法对于过滤列表等中的样式非常有用。
以下对我有用
.PFourTiles{
margin: 20px 13px 0px 0px;
}
.pseudo-primary{
.PFourTiles:last-of-type {
margin: 20px 0px 0px 0px;
}
}
问题是，是否可以创建一个链接，该链接显示特定类别中最新的文章中的最新图片？
我想在我的页眉中有一张图片，这张图片会改变，我的读者如果有兴趣可以阅读更多内容。
例如：我有几个类别，我想在我的首页上预览，但只预览其中一个类别中最新的文章中的第一张图片..
很难解释，但现在很多博主都使用这种类型的预览，我也想要，但我没有使用 wordpress，所以我必须找到解决这个问题的方法..
请帮忙！
（inthefrow.com、lilypebbles.co.uk、viviannadoesmakeup.com、heyclaire.com - 你懂的..）
此致
试试这个
.theList>p:nth-last-of-type(1) {
background: #ff0000;
}
其中 .theList 是您的容器元素
这就是我想要的东西
.className a:first-of-type[href*=”string”]
我无法让它与 first-of-type 或 last-of-type 结合使用。有人能够让它工作吗，或者使用这两个选择器根本不支持吗？
至于关于 last-of-type 是否在类上起作用，或者是否只在元素上起作用的争论，为什么不指定一个带有类的元素？以下对我来说非常有效 - 希望对某些人有所帮助。
不幸的是，它在这个例子中不起作用
https://jsfiddle.net/71xejb8o/1/
我认为它可能在某些情况下起作用，但在其他情况下却不起作用，具体取决于周围的元素。