Question

嘿伙计们，我有以下标记::

<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适用于第二个第n个孩子的选举？

对于第二个孩子来说，以下是不合适的：

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

Answer 1

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

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

nth-child（）选择器仅适用于少数几个元素

1 个答案: