4

.a + .bに関しての賛辞を選択する CSS セレクターはあります.a ~ .bか?

少し数学的に言えば、最初の兄弟の後継要素を除いて、要素に続くすべての兄弟要素を選択したいと考えています。

たとえば、すべてのdlリストで、すべてのdd要素を特定の色に着色しています。しかし、インライン リストでは、最初に続くものを同じ色dlに保ちたいのですが、後続のすべてのs は別の色に変更されます。以下は私のコードで、明らかにDRYではありません。色を再定義せずにそれを行う方法はありますか?dddtdd

/* dl lists contain dd terms all colored light aqua */
dl > dd {
    background-color: #c0ffee;
}
/* inline dl lists have dd terms displayed inline and colored yellow-green */
dl.inline > dd {
    display: inline;
    background-color: #bada33;
}
/* however, in an inline dl list, the first dd succeeding a dt is colored normally */
dl.inline > dt + dd {
    background-color: #c0ffee;
}

ここに画像の説明を入力

4

1 に答える 1

5

はい、補足を選択できます

簡単な例では、次のようになります.a + .b ~ .b。.bそれを一般的な兄弟セレクターの開始点として使用することで、最初を「スキップ」します。

あなたのdd要件を理解できれば、次のようになります。

/* dl lists contain dd terms all colored light aqua */
dl > dd {
    background-color: #c0ffee;
}
/* inline dl lists have dd terms displayed inline  */
dl.inline > dd {
    display: inline;
}
/* however, in an inline dl list, the first dd succeeding a dt is left 
   to be colored normally and all after it are colored yellow-green */
dl.inline > dt + dd ~ dd {
    background-color: #bada33;
}

しかし、それにはそれぞれdtが独自のものでdlある必要があります。そうしないと、問題が発生します。それらがすべて 1 つのリストの下にある場合、一般的な兄弟セレクターは役に立ちませdl.inline > dt + dd ~ ddんdl > dd。

だからあなたの場合

解決策は、コードを繰り返さないようにすることであり、特定性を単一のリストの下でオーバーライドしないようにすることです:

/* dl lists contain dd terms all colored light aqua */
dl > dd,
dl.inline > dt + dd {
    background-color: #c0ffee;
}
/* inline dl lists have dd terms displayed inline  */
dl.inline > dd {
    display: inline;
    background-color: #bada33;
}
于 2013-08-03T21:20:07.813 に答える