Css ：nth-child（）和：nth-of-type（）选择器的实际使用

在我自学CSS的过程中，我遇到了伪选择器

：nth-child（）

（以及它的相关选择器

：nth-last-child（）

和

：nth-of-type（）

）

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

从Google和Stack Overflow中我可以看出，它主要用于对表行和列表进行样式化，但对于如此复杂的选择器来说，这似乎太简单了，不可能是唯一的操作

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

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

基本理念

使用这些选择器，您需要关注html本身中用于选择的同级元素的顺序（这就是为什么它们如此常用于表和列表，因为

tr

、

td

和

li

元素在表和列表中的相应位置始终是彼此的兄弟元素）。其次，对于这些选择器，您关心的是包含或排除类型的元素（因此，

：n个子类

和

：n个类型

与之间的区别在于一个常见的误解是，这些伪类可以通过一些

进行计数。类名

，但它们不通过进行计数，它们通过html元素类型进行计数：即

，

，

，等等。）。通常，当html无法修改或结构可变时，它们允许选择某些内容，但您需要一致的选择器

某些场景

你可能想针对这些问题的“原因”是无限的，我无法推测

示例1，假设您想要设置

div

中倒数第二个元素的样式，不管它是什么类型（并且正在生成动态html，所以您甚至不知道它可能是什么元素），那么访问该元素的唯一方法是

：第n个最后一个子元素（2）

示例2，假设您希望第三个

h3

位于

div

中。您可以更改样式，但不能更改html（因此您无法将类放在其上，并且它没有要针对的类或id）。但是，您知道此

h3

在html中始终是其类型的第三个，尽管它周围的其他元素的数量可能会有所不同。因此

h3:n类型（3）

允许您以该类型为目标，否则您将无法获得这种能力

---

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

它的用途仅限于你的想象力-我不确定是否有人能告诉你所有这些。对于一个框架良好的问题+1。顺便说一句，你可以在这里探索与这些选择器相关的问题，你会知道“为什么使用它？”它完全取决于情况。没有理由总是使用它或不使用它。好的，基本上你可以用它做任何事情，正如@crush所说，它只受你的想象力的限制。我基本上用它来重复样式、交替行、导航…哈哈，所有这些评论，但除了样式表，没有人能说出任何其他原因！例1和任何一个都一样好，但是你为什么要这样做呢？关于例2：无法访问HTML是一个合理的原因，但是什么时候会发生？我想这意味着我现在可以逃跑了？我只是键入了一个更详细的答案，但由于家里的不可预见的情况，我现在不得不放弃：）我会在我可以的时候发布它。@ScottS你认为它们可以用作选择器（使用css为js选择dom元素）吗？如果可能的话，我想进一步探讨。@BoltClock附加信息总是很受欢迎：）@Jonathan：“为什么”除了“因为在这种情况下，人们希望对该元素应用某种风格属性。”如果没有实际的案例，就不可能说这是什么或为什么需要它。至于“何时”“例如，2，如果你环顾堆栈溢出，你会看到很多次人们说他们没有权限更改html。不管客户是否坚持这样做，设计师是从另一个网站刷代码，或者其他什么，我只知道会发生这种情况（我个人从未遇到过这种情况）。