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

【问题标题】：nth-child() selector working only on select few elements [duplicate]nth-child() 选择器仅适用于选择的几个元素[重复]
【发布时间】：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 但下一个有红色背景..那么？

标签： css css-selectors

【解决方案1】：

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

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

【讨论】：