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

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。

You cannot currently use CSS selectors to find your last 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

一样