css - CSS セレクター: div 内の最初の "a" をスタイルする

Question

正しい CSS セレクターを見つけるのに問題があります。構造は次のようになります。

<div>
    <a href="#"></a>
</div>
<div>
    <a href="#"></a>
</div>
<div>
    <a href="#"></a>
</div>

a最初の要素のスタイルを設定したいdiv

このセレクターで試しましたが、うまくいきませんでした

div:first-child a{}

score 2 · Accepted Answer

first-child絶対にうまくいくはずです、あなたは試すことができます

div:nth-of-type(1) a { /* Or div:first-child a */
    color: red;
}

上記のセレクターはすべての 1 番目の要素を選択し、1 番目の要素のすべてにdiv色を適用します。adiv

aすべてのタグで最初に出現するスタイルdivを使用する必要がある場合

div a:nth-of-type(1) { /* Or div a:first-child */
    color: red;
}

ここでは、すべてのタグですべての 1 日aが選択されますdiv

最後になりましたが、以下のセレクターを使用するよりも1staでのみ1st を選択する場合div

div:nth-of-type(1) a:nth-of-type(1) { /* Or div:first-child a:first-child */
    color: red;
}

注: それでも上記のセレクターが機能しない場合は、何らかのルールが宣言しているルールよりも具体的である!importantか、どこかで使用されているか、または (可能性が最も低い) 古いブラウザーでテストしている可能性があります。

score 0 · Accepted Answer

最初の div が選択され、すべてaが色を受け取ります#CCC。これが機能しない理由がわかりません。

div:first-child a { 
    color: #CCC;
}

それ以外の場合は、最初の div を選択し、div 内の最初のタグをスタイルするこのソリューションをテストします。

div:first-child a:first-child(1) {
    color: #CCC;
}

それ以外の場合は、セレクターに問題がある場合は、:first-childセレクターを使用してください:nth-of-type({ number expression | odd | even })。

3 に答える 3