html - cssでn番目の子を選択するには?

Question

nth-child次の HTML と CSS を考えると、疑似クラスを使用してリストの 2 番目の要素を強調表示したいと思います。これを達成するには、以下をどのように変更しますか?

HTML

<div id="topdiv">
    <div class="middlediv">
        <div>A</div>
        <div>B</div>
        <div>C</div>
    </div>
</div>

CSS

.topdiv > div:nth-child(n+2) {
    font-weight:bold;
    font-color:red;
}

score 7 · Accepted Answer

#topdiv .middlediv > div:nth-child(2) {
    font-weight:bold;
    color:red;
}

#id と.for classを使用する必要があります

説明n+2するだけで、2番目の要素に続くすべての兄弟が選択されます。また>、一致するセレクターの直接の子のみを選択します。

score 1 · Accepted Answer

一方通行：

#topdiv > .middlediv div:nth-child(2) {
color: olive;
}

.topdiv > div:nth-child(n+2)

スタイルを設定しようとしている子孫 div は子ではなく、代わりに孫であり、代わりにルート div で#topdiva を使用したため、機能しません(要素 ID をターゲットにすることを意図しています)。.#

3 に答える 3