:last-of-type或:nth-of-type(n)其中n是最后一个元素 [英] :last-of-type Or :nth-of-type(n) Where n Is Last Element
问题描述
此问题涉及使用:nth-of-type(n)的约定，其中n是最后一个元素或:last-of-type.根据定义，两者之间没有区别，只要n是最后一个元素，因此理论上两者都应该起作用.这是一些通用的示例代码(显然这不是真正的代码，但是这个简单的示例就足够了):
This question concerns conventions for using :nth-of-type(n) where n is the last element or :last-of-type. By definition, there is no difference between the two provided n is the last element, so in theory either should work. Here is some generic example code (this obviously isn't the real code, but something this simple suffices as a demonstration):
<!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>
在元素数量已知的情况下，典型的约定是什么?如果只有两个元素怎么办?在这两种情况下，通常使用哪个伪选择器?
What is the typical convention in a scenario with a known amount of elements? What if there are just two elements? In both cases, which pseudo-selector is typically used?
此外，在一个不寻常的情况下，编码人员只能控制样式表，而HTML在技术上极不可能但很容易改变，那该怎么办呢?还是这两种情况都属于个人喜好.
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? Or does this all fall to personal preference in both cases.
推荐答案
这在很大程度上是语义问题.
This is largely a matter of semantics.
通常，当您对第一个元素和最后一个元素(仅与竞争性:nth-of-type()规则中的第n个元素或与其他nth个元素不同)的样式感兴趣时，可以使用:first-child/:first-of-type和:last-child/:last-of-type，并且希望将这些规则应用于即使元素数量可以变化，第一个也是最后一个.
Generally, you use :first-child/:first-of-type and :last-child/:last-of-type when you're interested in styling the first and last element (only, or differently from other nth elements over competing :nth-of-type() rules) and you want these rules to apply to the first and last even when the number of elements can vary.
即使您确实知道元素的数量，即使这个数量永远不会改变，:nth-of-type(X)其中X是元素的数量也不能立即使它清楚地表明它所指的是哪个元素是最后"，而不是任意的第X个元素:
Even if you do know the number of elements in advance, and even if this number will never change, :nth-of-type(X) where X is the number of elements doesn't make it immediately clear that it's referring to "whichever element is the last" and not some arbitrary Xth element:
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.)
This, of course, is highly subjective — you may know your layout intimately enough that you know there will always be exactly X elements, so the example above will always target the first and last, and you may be the only developer to ever see your code and so it's not going to matter to you. That's why I said it's a matter of semantics. (You could get away with using :nth-last-of-type(1)... but then you might as well save yourself the keystrokes and use :last-of-type instead.)
:nth-of-type(X)更为可取的唯一情况是，如果您打算使用其他:nth-of-type()规则对其进行扩展，则每个规则都将特定元素的样式与前两个规则不同:
The only situation in which :nth-of-type(X) would be preferable is if you plan to extend this with additional :nth-of-type() rules, each styling a specific element differently from the first two:
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个语义.
In other words, when you want the rule that applies to the second element (the "last") to continue applying to the second element even when a third element is added — and you don't want that rule to then apply to the third (the new "last") element when that happens — use :nth-of-type(2), even if for example only 2 elements appear in the layout by default. At this point, you are no longer dealing with first/last semantics, but you are (and have all along been) dealing with nth semantics.
在这种情况下，似乎没有必要再在:first-of-type上使用:nth-of-type(1)，因为无论您添加或删除了多少个元素，第一个元素总是 布局.在那种情况下，您使用哪一个确实取决于个人喜好-例如，我更愿意:nth-of-type(1)与其他规则保持一致，因此它看起来并不奇怪:
In such a situation, it might seem unnecessary to then use :nth-of-type(1) over :first-of-type, since the first element will always be the first no matter how many elements you add or remove from your layout. Which one you use in that case is indeed down to personal preference — for example, I would prefer :nth-of-type(1) for consistency with the other rules so it doesn't look like the odd one out:
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在技术上却极有可能改变，但这种情况极不可能发生?
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都不会产生太大的变化，因此我的建议仍然是基于语义的选择.
That's not all that unusual actually. If the HTML is extremely unlikely to change, then it's likely that the layout doesn't support it and is therefore not going to continue to work correctly if it does change. Whether you use first/last or nth isn't going to make much of a difference, so my advice of choosing based on semantics remains.
出于完整性考虑，在:first-child方面还有一个额外的要点:与基于类型的变体的:last-child，:only-child，:nth-child()和 all 不同(:*-of-type)，:first-child是CSS2中引入的，因此，一些非常老的浏览器仅支持该功能，而没有支持其余的任何功能.
For the sake of completeness, there is one additional catch when it comes to :first-child: unlike :last-child, :only-child, :nth-child(), and all of the type-based variants (:*-of-type), :first-child was introduced in CSS2 and therefore several very old browsers only support that without supporting any of the rest.
在当今这个时代，您可能不必担心这一点，但是如果您:nth-child(1)，这样它在不支持的浏览器以及所有其他:nth-child()规则上失败，而不是第一个元素被设置样式，其余元素没有被设置样式，这取决于您的布局可能看起来最好丑陋，或者在最坏情况下导致不利的布局问题.
In this day and age you probably don't have to worry about this, but if you did want your layout to gracefully degrade on very old browsers, you might consider using :nth-child(1) so that it fails on unsupported browsers along with all the other :nth-child() rules, rather than having the first element styled and the rest not, which depending on your layout might look ugly at best or cause adverse layout problems at worst.
这篇关于:last-of-type或:nth-of-type(n)其中n是最后一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
