0

私はこれを間違って表現しているかもしれないので、お詫び申し上げます。同じ親にグループ化されていない場合に、CSSを使用して要素の最初の子をターゲットにするが、他の子はターゲットにしない方法はありますか？たとえば、次のようになります。

    <div class="parent">
       <div class="littlekid">
    </div>
    <div class="parent">
       <div class="littlekid">
    </div>
    <div class="parent">
       <div class="littlekid">
    </div>

つまり、最初の「親」の最初の「小さな子供」クラスを赤にし、他のすべてのクラスを青にしたいとしましょう。私はfirst-child、nth-of-type、nth-child、first-of-typeを試しましたが、どれも機能していないようです。それらはすべて、すべての「リトルキッド」クラスをターゲットにすることになります。最初の「littlekid」にクラスを追加してターゲットにすることはできません。これはjavascriptで行う必要がありますか？

4

1 に答える 1

3

親内の最初の要素の前に他の要素がないと仮定すると、<div class="parent"></div>これを使用できます。

div.parent > div.littlekid {
    color: blue;
}

div.parent:first-child > div.littlekid {
    color: red;
}

各親の中に複数ある場合は、<div class="littlekid">これを使用することもできます。

div.parent:first-child > div.littlekid:first-child {}
于 2013-03-18T14:33:11.323 に答える