css - nth-child() 选择器只作用于选定的少数元素

标签 css css-selectors

<分区>

我有以下标记:

<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 对第 2 个 nth-child 选择有效?

对于第 2 个第 n 个 child ,下面的假设不合适:

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

最佳答案

第 n 个 child ,如解释的那样 here根据他们的 parent 的第n个 child 的元素进行选择。

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

关于css - nth-child() 选择器只作用于选定的少数元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30433929/

相关文章:

html - 是否有选择器以特定网格位置的元素为目标?

javascript - 在 CSS 中每隔一个子层着色

css - 使用 :before pseudo element (z-index issue) 突出显示列表条目

css - 在 <li> 文本和之前的内容之间添加间距

jquery - 如何删除div元素中文本的最后一个字符

javascript - 使用 div 的高度来确定另一个 div 的 padding 或 margin-top

css - 垂直滚动问题

javascript - javascript和css时序是否同步?

html - 重置 css 中的伪类更改

javascript - 使用 CasperJS/Javascript 提交表单?