nth-child() 选择器仅适用于选择的几个元素[重复]

Posted 2023-03-06

【中文标题】nth-child() 选择器仅适用于选择的几个元素[重复]

【英文标题】：nth-child() selector working only on select few elements [duplicate]

【发布时间】：2015-08-06 16:10:46

【问题描述】：

我有以下标记：

<div class="heading-container">
        <p class="stroke">Who we</p>
        <h2 class="section-title extreme-bold">Contact us</h2>
        <p class="stroke"></p>
</div>

现在我可以使用以下选择器选择第一个 .stroke：

.heading-container .stroke:nth-child(1)
    max-width: 200px;

但以下不适用于第二笔画类：

.heading-container .stroke:nth-child(2)
    max-width: 200px;

但以下再次有效：

.heading-container .stroke:nth-child(3)
    max-width: 200px;

现在为什么值 3 对第二个 nth-child 选择有效？

对于第 2 个 nth-child 来说，followig 是否合适：

.heading-container .stroke:nth-child(2)
    max-width: 200px;

【问题讨论】：

试试.stroke:nth-of-type(2)

@Akshay 超级感谢！！！！！！

@Tenali 我看到那行代码正在工作？你能说说那行代码是如何解决你的问题的吗？

@Leothelion 见小提琴jsfiddle.net/kLr59ke6/2

@tenali 我检查了你的小提琴，仍然没有选择 h2 但下一个有红色背景..那么？

【参考方案1】：

第 n 个孩子，正如 here 解释的那样，选择基于 他们的父母的第 n 个孩子的元素。

所以 1 正在工作，因为第一个笔画是第一个孩子。 3 有效，因为第二次中风是第三个孩子。 2 行不通，因为没有第二个孩子的笔画，只有 h2