这个问题涉及使用 :nth-of-type(n) 的约定，其中 n 是最后一个元素或 :last-of-type。根据定义，如果 n 是最后一个元素，两者之间没有区别，因此理论上两者都应该有效。这是一些通用的示例代码(这显然不是真正的代码，但如此简单的代码足以作为演示):
<!DOCTYPE html>
<style type="text/css">
div:first-of-type { background-color: red; }
div:last-of-type { background-color: green; } /* or div:nth-of-type(n) for last element n*/
</style>
<html>
<div>Row 1</div>
<div>Row 2</div>
</html>
在元素数量已知的情况下，典型约定是什么？如果只有两个元素呢？在这两种情况下，通常使用哪种伪选择器？
此外，对于编码人员只能控制样式表而 HTML 极不可能但在技术上易于更改的异常情况怎么办？还是这两种情况都取决于个人偏好。
这主要是语义问题。
通常，当您对设置第一个和最后一个元素的样式(仅在竞争 :nth-of-type() 规则上不同于其他第 n 个元素)并且您希望这些规则应用于第一个和最后一个，即使数字元素的数量可能会有所不同。
即使你事先知道元素的数量，即使这个数字永远不会改变，:nth-of-type(X) 其中 X 是元素的数量也不会立即明确它指的是“最后一个元素”而不是某个任意的第 X 个元素:
div:nth-of-type(even) { background-color: yellow; }
div:nth-of-type(1) { background-color: red; }
div:nth-of-type(12) { background-color: green; }
当然，这是非常主观的——您可能非常了解您的布局，知道总会有 X 个元素，所以上面的示例将始终针对第一个和最后一个，并且您可能是唯一的开发人员看过你的代码，所以这对你来说并不重要。这就是为什么我说这是语义问题。 (您可以使用 :nth-last-of-type(1)...但是您也可以省去击键并使用 :last-of-type 代替。)
:nth-of-type(X) 唯一更可取的情况是，如果您计划使用额外的 :nth-of-type() 来扩展它> 规则，每个样式与前两个不同的特定元素:
div:nth-of-type(1) { background-color: red; }
div:nth-of-type(2) { background-color: green; }
/* Added */
div:nth-of-type(3) { background-color: blue; }
换句话说，当您希望适用于第二个元素(“最后一个”)的规则即使在添加了第三个元素时也继续适用于第二个元素 — 而您不希望该规则随后适用当发生这种情况时到第三个(新的“最后一个”)元素 — 使用 :nth-of-type(2)，即使例如只有 2 个元素出现在布局中默认。此时，您不再处理第一个/最后一个语义，而是(并且一直在)处理第 n 个语义。
在这种情况下，似乎没有必要使用 :nth-of-type(1) 而不是 :first-of-type，因为第一个元素无论您在布局中添加或删除多少元素，始终都是第一个。在那种情况下你使用哪一个确实取决于个人偏好——例如，我更喜欢 :nth-of-type(1) 来与其他规则保持一致，所以它看起来不像奇数出局:
div:first-of-type { background-color: red; } /* Looks out of place... */
div:nth-of-type(2) { background-color: green; } /* ... when every other element... */
div:nth-of-type(3) { background-color: blue; } /* ... is numbered */
Additionally, what about an unusual scenario where a coder only has control over the stylesheet and the HTML is extremely unlikely to but technically liable to changing?
这实际上并没有那么不寻常。如果 HTML 极不可能更改，则布局很可能不支持它，因此如果它确实更改，则不会继续正常工作。无论您使用 first/last 还是 nth 都不会有太大区别，因此我的基于语义进行选择的建议仍然存在。
为了完整起见，:first-child 有一个额外的问题:与 :last-child 不同，:only-child 、:nth-child() 和所有 基于类型的变体 (:*-of-type)， :first-child 是在 CSS2 中引入的，因此一些非常古老的浏览器只支持它而不支持任何其他浏览器。
在这个时代你可能不必担心这个，但如果你确实希望你的布局在非常旧的浏览器上优雅地降级，你可以考虑使用 :nth -child(1) 以便它在不受支持的浏览器上失败以及所有其他 :nth-child() 规则，而不是让第一个元素设置样式而其余元素不设置样式，这取决于在您的布局上可能充其量看起来很丑陋，或者在最坏的情况下导致不利的布局问题。