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

Question

我有这些代码

<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 选择器的第二个 child 。

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

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

我该如何解决这个问题？

Answer 1

: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>