:last-of-type 或 :nth-of-type(n) 其中 n 是最后一个元素 [关闭]答案

【问题标题】：:last-of-type Or :nth-of-type(n) Where n Is Last Element [closed]:last-of-type 或 :nth-of-type(n) 其中 n 是最后一个元素 [关闭]
【发布时间】：2019-02-08 01:03:25
【问题描述】：

这个问题涉及使用: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 极不可能但在技术上易于更改，那该怎么办？还是这两种情况都取决于个人喜好。

【问题讨论】：

如果这些项目有可能超过两个，请根据您需要为最后一个或第二个设置样式来选择。
附带说明，如果您可以控制代码，我建议您为每个 div 设置一个类并以这种方式设置它们的样式。如果您要修改 html，则以您在上面发布的方式使用 first-of-type 和 last-of-type 很容易崩溃。
@Heretic Monkey：还不错 - 这些问题都非常相关，可以用几段来回答。如果提问者没有列举他们想要回答的不同场景，那么具有讽刺意味的是，这个问题就太宽泛了。
@CWSites：如果 :last-of-type 样式转移到新的最后一个元素，那么 CSS 会按预期工作并且没有任何损坏。如果 CSS 作者不打算以这种方式传输样式，那么他们不应该首先使用 :last-of-type 伪（正如我在回答中提到的那样）。如果布局本身不支持以这种方式添加新元素，那么这是布局的一个限制，不会通过使用类而不是伪类来缓解。无论哪种方式，HTML 编辑器都需要与 CSS 编辑器通信。
这个问题就目前而言确实是一个邀请基于意见的回应的问题。 BoltClock 的回答很好，但解决了这个问题，因为它应该被问到，而不是它当前存在。我会敦促你编辑这个（因为我觉得这样做是你的特权）以非基于意见的方式提出这个问题，例如“这两种方式选择事物的实际区别是什么”。 QED，我不认为 Shog 的重新开放对于当时的问题状态是合理的。

标签： html css css-selectors

【解决方案1】：

这主要是语义问题。

通常，当您对第一个和最后一个元素的样式感兴趣时（仅，或与其他第 n 个元素不同，而不是竞争 :nth-of-type() 规则）并且您希望这些规则适用于第一个和最后一个，即使元素的数量可以变化。

即使你事先知道元素的数量，即使这个数字永远不会改变，:nth-of-type(X) 其中 X 是元素的数量并不能立即清楚地表明它指的是“无论哪个元素是last" 而不是任意的 Xth 元素：

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)，即使布局中只有两个元素出现默认。此时，您不再处理第一个/最后一个语义，而是（并且一直）处理第 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 */

此外，如果编码人员只能控制样式表，而 HTML 极不可能但在技术上易于更改，那该怎么办？

实际上，这并不是那么不寻常。如果 HTML 极不可能发生更改，那么布局很可能不支持它，因此如果它确实发生更改，它将无法继续正常工作。无论您使用 first/last 还是 nth 都不会产生太大影响，所以我仍然建议基于语义进行选择。

为了完整起见，:first-child 有一个额外的问题：与 :last-child、:only-child、:nth-child() 和 all 基于类型的变体不同(:*-of-type)、:first-child 是在 CSS2 中引入的，因此一些非常旧的浏览器只支持它而不支持其他任何浏览器。

在这个时代，您可能不必担心这一点，但如果您确实希望您的布局在非常旧的浏览器上优雅降级，您可以考虑使用 :nth-child(1) 以便它在不受支持的浏览器以及所有其他 :nth-child() 规则上失败，而不是设置第一个元素的样式，其余的则不设置样式，这取决于您的布局，充其量可能看起来很丑，或者最坏的情况会导致不利的布局问题。

【讨论】：

【解决方案2】：

当您不知道 n 的值时，最好使用最后一种类型

例如将最后一个列表项突出显示为红色

li:last-of-type
{
   background: red;
}

如果您知道特定场景的 if n 的值，那么您将使用第 n 种类型例如，您总是想突出显示您将使用的第二个列表项蓝色

li:nth-child(2)
{
   background: blue;
}

【讨论】：