-1

より短いcssコードselect childを書く方法は?
例:
Q1. で選択しようとする.l1 .l3と.a

2 回書く必要があり.aます。4 つの子 div を選択する必要がある場合は、4 回書く必要があります。css の他の構文はありますか?

.a .l1, .a .l3{
}


<div class="a">
    <div class="l1">
    </div>
    <div class="l2">
    </div>
    <div class="l3">
    </div>
    <div class="l4">
    </div>
    ....
</div>
4

3 に答える 3

0

この種の状況では、CSS は冗長になる可能性があります。多くの場合、多くの繰り返しがあり、それについてできることはあまりありません。

この場合、セレクターの一部を繰り返すこと.aは最悪のケースではありません。実際には比較的短く明確です。私はそれについて心配しません。

それでも心配な場合は、いくつかのオプションを提供できます。

  • nth-child()
    このセレクターを使用すると、通常のパターンに基づいてグループ内の要素を選択できます。たとえば.a nth-child(2n-1)、最初の要素から始めて 2 つおきの要素を選択するのでl1、l3質問の要件に一致します。

    ただし、あなたの例はかなり小さかったです。最初の数回の一致を超えて、これが要件に適しているかどうかは明らかではありません。nth-child通常のパターンにのみ適しています。リスト内の任意の要素をランダムに選択する必要がある場合は、適切ではない可能性があります。また、適切であっても、IE8 などの古いブラウザーではサポートされていません (これは、Selectivizrなどの JavaScript ポリフィルで解決できます)。

  • SASS や Lessなどの CSS プリプロセッサを使用します。
    SASS と Less はどちらも、CSS コードにまったく新しい構文を提供します。これにより、関連するスタイルや変数などのネストなどの巧妙な操作が可能になります。あなたの場合、これにより、次のようなコードを記述できます。

    .a {
    .l1, .l3 {
        /* styles go here */
    }
}

    それはまさにあなたが探しているものかもしれませんか？

    ここでの欠点は、それが CSS ではないことです。SASS または Less プロセッサーによって処理され、ブラウザーが理解できるようになる前に CSS に変換される必要があります。これは通常、サイト展開の一部として行われます。

于 2013-06-07T11:11:58.347 に答える
0

これらの状況では、次のことをお勧めします。

.a div:nth-child(odd) {
    /* first, third, etc */
}
于 2013-06-07T10:02:34.260 に答える
0

すべての div を選択する場合は、次を使用できます。

.a div{

}

これらの div に他の div が含まれている場合は、子セレクターを使用して親スタイルを継承しないようにすることをお勧めします。

.a + div{

 }

1つを除いてすべてを選択している場合（たとえば3番目）、次を使用できます。

.a div:not(:nth-child(3)){

}

:nth-child は IE9+ でのみサポートされているため、サポートするブラウザーによって異なります。

于 2013-06-07T09:54:18.013 に答える