如何选择具有某个类的第二个元素？

Question

首先让我说我知道nth-child，据我所知，这在我的情况下不起作用。说我有以下HTML：

<div>
    <div class="myclass">test1</div>
</div>
<div>
    <div class="myclass">test2</div>
</div>
<div>
    <div class="myclass">test3</div>
</div>

我想突出显示包含test2的div。根据我的理解使用.myclass:nth-child(2)将无法工作，因为它正在寻找myclass的第二个子实例，并且我拥有的所有实例都是第一个子实例。您可以看到这不起作用here。

所以我的问题是如何仅使用CSS3从上面的示例中选择myclass的第二个实例？我不能使用javascript / jquery。

Answer 1

这应该这样做：

div:nth-of-type(2) .myclass {
    background:pink !important;
}

或

div:nth-child(3) .myclass {
    background:pink !important;
}

Answer 2

div:nth-of-type(2) > .myclass{
    background-color:red;
}

稍微强一点。

Answer 3

要关注imjared的答案，你可能想要改变你对DOM的看法......从原来的问题来看，听起来你正试图让.myclass的第二个实例改变，但CSS不能真实地看待所有实例之前和之后的全局。

相反，我会这样想：

<some containing Element, like body> div:nth-of-type(2) .myclass {
    color: red;
}

您真正想要选择的是某些包含元素的第二部分中的.myclass元素。您的问题中的代码仅在.myclass元素是直接兄弟节点时才有效，而它们不是。