css - 如何在CSS中使用nth-child获得不同的类选择器

我有这些代码

<div class="test">
    <div class="tag1"></div>
    <div class="tag1"></div>
    <div class="tag1"></div>
    <div class="tag2"></div>
    <div class="tag2"></div>
    <div class="tag2"></div>
</div>

现在，我想获得.tag2选择器的第二个孩子。

我尝试了此代码，但它不起作用，但是当我使用.tag1时，它正在起作用。

.test .tag2:nth-child(2) {
    background-color: #000;
}

我怎样才能解决这个问题？

最佳答案

:nth-child适用于元素，不适用于其他选择器。在这里，您的.tag2元素是列表中的第4个元素。

当浏览器开始实现Selectors Level 4标准时，我们将能够使用:nth-match结构化伪类选择器来实现这一点，但是不幸的是，这还有很长的路要走。

潜在的CSS解决方案（取决于标记）

如果您的标记始终是第一个.tag2仅跟随.tag1，第二个.tag2仅跟随.tag2，则可以使用以下方法进行伪造：

.tag1 + .tag2 + .tag2 {
    background-color: #000;
}

这将选择紧随.tag2元素紧随.tag2元素的.tag1元素。

JavaScript解决方案

如果无法做到这一点，那么您就必须寻求JavaScript解决方案（或在生成内容的后端实现某些功能）。

下面的示例提取.tag2容器中的所有.test元素，然后获取第二个元素（此处[1]，请记住0索引：[1] = 2nd），然后将样式应用于该元素。

在应用样式之前，您需要添加一些检查以确保该元素存在。

document.querySelector('.test').querySelectorAll('.tag2')[1].style.background = '#000'

<div class="test">
    <div class="tag1">tag1</div>
    <div class="tag1">tag1</div>
    <div class="tag1">tag1</div>
    <div class="tag2">tag2</div>
    <div class="tag2">tag2</div>
    <div class="tag2">tag2</div>
</div>