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
我有以下标记:
<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