0

CSS を使用して、兄弟の場合、子のクラスに応じて要素のスタイルを設定する方法はありますか? それとも親の兄弟の子？

たとえば、次のテーブルがあるとします。

<table>
    <tr><td><span class='red'>A</span></td><td><span class='blue'>B</span></td></tr>
    <tr><td><span class='red'>C</span></td><td><span class='red'>D</span></td></tr>
</table>

そして、クラスが「赤」の SPAN を選択したいのですが、隣接する (同じ行にある) TD 要素にクラスが「青」のスパンが含まれている場合に限ります。したがって、セル A には影響しますが、セル C には影響しません。これは可能ですか? 兄弟の属性に応じて要素を選択するのに最も近いものは何ですか?

4

2 に答える 2

1

CSSの「兄弟を含む」セレクターはありますか?

CSS には「contains」セレクターまたは親セレ​​クターがないため、「sibling contains」セレクターまたは「sibling is a parent of」セレクターはありません。

クラスが「赤」の SPAN を選択したいのですが、隣接する (同じ行にある) TD 要素にクラスが「青」のスパンが含まれている場合に限ります。したがって、セル A には影響しますが、セル C には影響しません。これは可能ですか? 兄弟の属性に応じて要素を選択するのに最も近いものは何ですか?

兄弟コンビネータでは、すでに利用可能なもの (ID、クラス、疑似クラス、属性など) を使用して、同じレベルの兄弟に基づいて要素を照合することしかできません。

あなたの場合、あなたのspan要素はお互いの兄弟ではありませんが、それらの親は兄弟ですtd。tdただし、前述の親セレクターがないため、兄弟の子に基づいて最初の子を選択することはできません。したがって、現在のマークアップでは、CSS だけを使用することはできません。

于 2013-04-16T11:10:34.527 に答える
0

隣接する ( +) および一般的な ( ~) 兄弟セレクターがありますが、@BoltClock で説明されているように、現在のマークアップにはまだ役立ちません。ただし、マークアップを次のように変更した場合:

<table>
    <tr><td class="red><span>A</span></td><td class="blue"><span>B</span></td></tr>
</table>

すなわち。クラスを<td>s ではなく s に移動すると、<span>運が良くなるはずです。

td.red + td.bluetd.blue要素に続くすべての要素を選択しますtd.red。

于 2013-04-16T12:24:44.607 に答える