为什么CSS3同时具有：first child和：nth-child（）伪类选择器？

为什么CSS3同时具有

：first child

和

：nth-child（）

伪类选择器

我很好奇

：第一个孩子
：第n个孩子（1）
不应该选择完全相同的东西吗

我觉得有两个伪类选择器来做同样的事情似乎很奇怪，我能看到的唯一原因是
：第一个孩子
少了一个字符，但这是以多了一个伪类选择器来记忆为代价的。
如果我没弄错的话，在CSS2中添加了
：first child
，而在CSS3中添加了
：nth-child（）
——很可能是在前面提到的psuedo类的基础上“构建”的

另一方面，
:first child
将在IE7中工作，而
:nth child（1）
将不工作，因此它们并不总是选择完全相同的内容

来源


我认为这仅仅是由于CSS标准的发展


第一个孩子是一个

n个子项
是一个

CSS2不会因为CSS3的存在而突然变得过时。根据CSS3规范：

本文档描述了CSS1和CSS2中已经存在的选择器，并进一步介绍了CSS3和其他可能需要它们的语言的新选择器

是在中介绍的，而属于

（包括IE8和以下版本）支持新的CSS伪类，并且旧的伪类也被广泛使用。
除了关于两个选择器的不同实现版本的所有正确答案之外，我假设这是一种遵循最小意外原则的约定：

有一个
：last child
选择器，它是一种特殊的东西（不能用任何
：n个child
选择器调用代替（好的，除了一些肮脏的黑客），所以人们总是希望还有一个
：first child

如果我看到任何
最后一个
函数/选择器没有相应的
第一个
，我个人会非常困惑

另一方面可能会有所不同（因为在大多数情况下，
first
更有用，例如，对于突出显示书中章节第一个字符的文本等）。所以有了
：：第一个字母
选择器，但没有
：：最后一个字母
（还没有？）。但我不认为会有这样一个字母，因为在实践中没有人真正强调文本的最后一个字母。
：first child
选择器也是如此：它是通过CSS2引入的，但当时还没有
：last child
，它是通过CSS3和
：nth child
选择器引入的。
现在看起来很奇怪，但较旧的IE版本不支持
nth child
。它们是在不同的时间推出的，
：first child
，
：nth child
。当您的技术无处不在时，追溯兼容性非常重要。在我看来，从逻辑上讲，在没有：第一个子选择器的情况下使用：last-child选择器是没有意义的n-child（）无法在动态设置中选择最后一个子元素。例如，只有知道最后一个子元素是第五个元素，才能使第n个子元素起作用。此外，CSS变得相当“冗长”，超出了上述所有原因，它比：nth child（1）或：nth child（5）@Michael:：nth-child（）无法在动态设置中选择最后一个子元素更容易阅读：first child和：last child（）。这就是为什么：nth-last-child（）作为：nth-child（）的补充而引入的原因。真正的原因是：最后一个孩子在CSS3之前不存在是因为它最初是为CSS2而提出的，后来由于并发症而推迟，而这些并发症并不为人所知。执行不力？不确定，但不管是什么，它没有到达CSS2并不完全是一个意外。更不用说：最后一个孩子被介绍了。你可以就保留第一个孩子的问题进行辩论，因为最后一个孩子已经成为了一件事，尽管上面提到了所有其他东西。@Michael
：nth-last-child（）
也被添加到了CSS3中，所以
：last child
也不是必须选择最后一个元素的（尽管我很高兴它的存在。对大多数人来说，这更容易使用和阅读）：：第一个字母甚至早于日期：第一个孩子：第一个字母已经出现在CSS1中，然而：第一个孩子是在CSS2中引入的。