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>

そして、を含む div を強調表示したいと思いますtest2。私が理解して.myclass:nth-child(2)いることから、の2番目の子インスタンスを探しており、myclass私が持っているすべてのインスタンスが最初の子であるため、使用は機能しません。ここでこれが機能していないことがわかります。

私の質問は、myclassCSS3 のみを使用して上記の例から の 2 番目のインスタンスを選択するにはどうすればよいですか? 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 の 2 番目のインスタンスを変更しようとしているように聞こえますが、CSS は実際にはグローバルに見えません前後のすべてのインスタンス。

代わりに、次のように考えます。

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

実際に選択しようとしているのは、含まれている要素の2 番目のセクションにある .myclass 要素です。質問のコードは、.myclass 要素が直接の兄弟である場合にのみ機能しますが、そうではありません。

于 2013-06-14T02:28:52.083 に答える