css - CSS3 で CSS セレクターを使用する方法

Question

私は次のHTMLを持っています:

<div class="row">
<p> Text </p>
</div>

<div class="row">
<p> Text </p>
<p> Text </p>
</div>

行の唯一の子であるすべての要素に異なるスタイルを適用したいと考えています。私は以下のようにパラのためにこれを行うことができることを知っています:

.row p:only-child{

//apply your styles 

}

私の質問は簡単です:::only-child行の親 (他の s など) のすべての要素にスタイリングを適用する簡単な方法はありますかdiv、それとも次のように際限なくマークアップする必要がありますか?

.row .class1:only-child{

//apply your styles 

}

.row class2:only-child{

//apply your styles 

}

Answer 1

これには 2 つの異なるレベルがあります。

.row *:only-child

.row唯一の子である のすべての子を選択します。

.row > *:only:child

唯一の子である .rowの直接の子をすべて選択します。セレクター*を使用するだけで暗示されるため、実際には必要ないことに注意してください。:only-childセレクターは のようになります.row > :only-child。

したがって、次の例では:

<div class="row">
    <p id="p1">Text goes here</p>
</div>
<div class="row">
    <p id="p2"><span id="span1">Text</span></p>
    <p id="p3">More text is here</p>
</div>

最初のセレクターは と を選択#p1します#span1が、2 番目のセレクターは のみを選択します。#p1

Answer 2

あなたができる

.row .class1:only-child, .row.class2:only-child{
    //apply your styles
}