：last-of-type或：nth-​​of-type（n）其中n是最后一个元素

Question

此问题涉及使用Car的约定，其中:nth-of-type(n)是最后一个元素或n。根据定义，:last-of-type是最后一个元素，两者之间没有区别，因此从理论上讲两者都应该起作用。这是一些通用的示例代码（显然这不是真正的代码，但是这个简单的示例就足够了）：

n

在元素数量已知的情况下，典型的约定是什么？如果只有两个元素怎么办？在这两种情况下，通常使用哪个伪选择器？

此外，在不寻常的情况下，编码人员只能控制样式表，而HTML在技术上极不可能但很容易更改，那又如何呢？还是这两种情况都属于个人喜好。

Answer 1

这在很大程度上是语义问题。

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

即使您确实知道元素的数量，即使这个数量永远不会改变，: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 */

  

此外，在一个不寻常的情况下，编码人员只能控制样式表，而HTML在技术上极不可能但很容易改变呢？

那实际上并不是那么异常。如果HTML极不可能更改，则布局可能不支持它，因此如果更改，则布局将无法继续正常工作。无论您使用first / last还是nth都不会产生很大的变化，因此我的建议仍然是基于语义的选择。

---

为了完整起见，:first-child还有一个附加要点：与:last-child，:only-child，:nth-child()和 all 不同是基于类型的变体（:*-of-type）的一种，:first-child是CSS2中引入的，因此，一些非常老的浏览器仅支持该类型，而其余的都不支持。

在当今这个时代，您可能不必担心这一点，但是如果您想让布局在非常旧的浏览器上正常降级，则可以考虑使用:nth-child(1)因此，它会在不受支持的浏览器以及所有其他:nth-child()规则下失败，而不是对第一个元素进行样式设置，而对其余元素则不进行样式设置，这取决于您的布局，看起来最好看起来很难看，或者最坏情况下会导致不利的布局问题。 / p>

Answer 2

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

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

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

如果您知道特定情况下n的值，则可以使用第n个类型 例如，您一直想用蓝色突出显示第二个列表项

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