nth-child() select或仅处理 select 几个元素

nth-child() selector working only on select few elements

我有以下标记:

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

现在我可以 select 使用以下 select 或:

第一个 .stroke
.heading-container .stroke:nth-child(1){
    max-width: 200px;
}

但以下内容不适用于第二笔class:

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

但以下再次起作用:

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

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

对于第二个 nth-child 以下内容不合适:

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

nth child,如前所述,here 根据 的 parents 的第 n 个 child 元素进行选择。

所以 1 有效,因为第一笔画是第一个 child。 3 有效,因为第二笔是第三笔 child。 2 不行,因为没有第 2 children 的笔画,只有 h2