30

私はtdタグといくつかのdiv内部を持っていますtd:

<td>
   <div class='test'></div>
   <div class='test'></div>
</td>

<td>
   <div class='test'></div>  
</td>

に複数ある場合は追加margin-bottomしたい。cssでこれを行うにはどうすればよいですか？divtd

4

6 に答える 6

58

CSS の要素の総数を直接「カウント」することはできないため、2 つ以上の div がある場合にのみクラスを適用する方法はありません (そのためには JavaScript が必要です)。

ただし、考えられる回避策は、クラスを td 内のすべての div に適用することです...

td > div {
    margin-bottom: 10px;
}

...そして、要素が1つしかない場合は、別のスタイルでオーバーライド/無効にします。これにより、間接的に、子要素が 2 つ以上ある場合にスタイルを追加できます。

td > div:only-child {
    margin-bottom: 0px;
}

または、最初の div の後のすべての div に適用することもできます。

td > div:not(:first-child) {
    margin-bottom: 10px;
}

編集：または、Itayがコメントで述べているように、兄弟セレクターを使用してください

td > div + div {
    margin-bottom: 10px;
}
于 2013-09-11T09:58:34.790 に答える
2

CSS-Has のブラウザーサポートは限られています。

しかし、ここに行きます：

td:not(:has(div:first-child:last-child))

ボーナス：

td:not(:has(div:only-child))
于 2017-04-07T12:10:56.783 に答える