2

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

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

根据我从 Google 和 Stack Overflow 得知的信息，它主要用于对表格行和列表进行样式化- 但这似乎太简单，无法成为可能如此复杂的选择器的唯一操作。

我错过了什么吗？提前致谢！

4

1 回答 1

5

有很多原因...

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

基本理念

使用这些选择器，您会关心html 本身中的兄弟元素的顺序以进行选择（这就是为什么它们如此常用于表格和列表的原因，因为tr,td和li元素在各自的位置始终是彼此的兄弟元素表和列表）。其次，对于这些选择器，您关心的是包含或排除元素类型:nth-child（因此和之间的区别:nth-of-type; 和一个常见的误解是这些伪类可以按 some 计数.className，但它们不能，它们按 html 元素类型计数：即<div>, <li>_<span>， ETC。）。通常，当 html 无法修改或结构可变时，它们允许选择某些内容，但您需要一致的选择器。

一些场景

您可能想要针对这些的“原因”是无限的，我无法推测。

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

例 2，假设你想要第三个h3里面的 a div。您可以更改样式，但不能更改 html（因此您不能在其上放置类，并且它没有可定位的类或 id）。但是，您知道这h3始终是其在 html 中的第三个类型，尽管它周围的其他元素的数量可能会有所不同。所以h3:nth-of-type(3)让你有能力瞄准那个，否则你不会有能力。

我可以给出其他场景（同样，无限），但如果你坚持“基本理念”中提到的概念，你也许会明白为什么会使用它们。

于 2013-07-03T16:53:08.477 回答