0

首先让我说我知道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. 据我了解，使用.myclass:nth-child(2)将不起作用，因为它正在寻找第二个子实例，myclass而我拥有的所有实例都是第一个子实例。你可以看到这在这里不起作用。

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

4

3 回答 3

3

这应该这样做：

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

或者

div:nth-child(3) .myclass {
    background:pink !important;
}
于 2013-06-14T02:16:24.163 回答
0 
div:nth-of-type(2) > .myclass{
    background-color:red;
}

稍微健壮一点。

于 2013-06-14T02:28:07.877 回答
0

要遵循 imjared 的回答，您可能想改变您对 DOM 的看法……从您原来的问题来看，听起来您正试图让 .myclass 的第二个实例发生变化，但 CSS 并不能真正看全局对于之前和之后的所有实例。

相反，我会这样想：

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

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

于 2013-06-14T02:28:52.083 回答