：最后类型的伪类不按预期行事

Question

我正在应用:last-of-type到一个应该是这样的元素。 在http://www.elemovements.com上查看最终的div.info （这是每篇文章的底部信息）。 为什么不起作用？

Answer 1

:nth-of-type()系列伪类仅查看元素的类型 ，即其标记名称。 它们不会按类选择器或任何其他选择器进行过滤。

因此，你的陈述：

我正在应用:last-of-type到一个明显是这样的元素。 看看最后的div.info

是矛盾的。 有一个div.center之后，使得上一次div ，而不是你div.info 。

您目前无法使用CSS选择器查找最后一个div.info ; 你将不得不求助于添加一个额外的类和/或使用JavaScript。

Answer 2

你有一个关于CSS的最常见的误解。 CSS不是从左到右阅读，而是从右到左阅读！

这意味着，浏览器将查找div.info:last-of-type ，因此浏览器将按以下顺序过滤元素：

1. 每种类型的最后一个元素（标签名称）
2. 有类info
3. 是一个div 。

您的元素不符合这些条件。 它可能是具有信息类的最后一个div，但没有最后一个元素具有一类info

Answer 3

这两个是相同的：

div.info:last-of-type

div:last-of-type.info

:last-of-type命中div而不是.info ，而.info将找到的结果限制为0 。

另一个例子：

.section.section-test:last-of-type

实际上会像： .section:last-of-type.section-test