css - :nth-child() and :nth-of-type() selectors的实际使用

Question

在自学 CSS 的过程中，我遇到了伪选择器 :nth-child() (以及它的相关选择器 :nth-last-child() 和 :nth-of-type())。

我已经对它进行了足够的研究以理解语法和操作 - 但还没有看到任何关于何时以及为什么应该使用它的信息。

根据我从 Google 和 Stack Overflow 了解到的信息，它主要用于样式化表格行和列表 - 但这似乎太简单了，不可能成为如此复杂的选择器的唯一操作.

我是不是错过了什么？提前致谢!

Answer 1

有很多原因......

...正如其他人在评论中指出的那样。但是你想要一些非表格或列表的原因，看起来是这样。

基本思想

使用这些选择器，您会担心 html 本身内同级元素的顺序(这就是它们如此常用于表格和列表的原因，因为 tr 、 td 和 li 元素在表和列表中的相应位置始终是彼此的 sibling )。其次，对于这些选择器，您担心包含或排除类型的元素(因此 :nth-child 和 :nth-of-type 之间存在差异；以及一个常见的误解是这些伪类可以按一些 .className 计数，但它们不是，它们按 html 元素类型计数:即 <div> 、 <li> 、 <span> 等)。通常，当 html 无法修改或结构可变时，它们允许选择一些内容，但您需要一个一致的选择器。

一些场景

您可能想要以这些为目标的“原因”是无限的，我无法推测。

示例 1，假设您想要设置 div 中倒数第二个元素的样式，无论它是什么类型(并且正在生成动态 html，所以您甚至不确定它可能是什么元素)，那么访问该元素的唯一方法是 :nth-last-child(2) 。

示例 2，假设您想要 h3 中的第三个 div 。您可以更改样式但不能更改 html(因此您不能在其上放置一个类，并且它没有要定位的类或 ID)。但是，您知道这个 h3 在 html 中始终是其类型的第三个，尽管它周围的其他元素的数量可能会有所不同。所以 h3:nth-of-type(3) 允许您以该目标为目标的能力，否则您将不会拥有这种能力。

我可以给出其他场景(同样，没有限制)，但如果你坚持“基本思想”中提到的概念，你或许可以明白为什么可以使用它们。