如果元素有多个子节点,如何添加CSS？

Question

我有td标签和几个div内部td:

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

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

我想添加margin-bottom,div如果有多个td.我怎么能用css做到这一点？

Answer 1

你不能直接'计算'CSS中的元素总数,所以如果有2个或更多的div(你需要JavaScript),就没有办法只应用这个类.

但是一个可能的解决方法是将类应用于td中的所有div ...

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

...当只有一个元素时,使用不同的样式覆盖/禁用它.这间接允许您在有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;
}

Answer 2

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

Answer 3

实际上你可以用css使用nth-last-child选择器来做到这一点

小提琴

所以如果你的标记是这样的:

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

<hr />

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

</table>

CSS

div:nth-last-child(n+2) ~ div:last-child{
    margin-bottom: 40px;
}

...只有当存在一个至少有2个子div的容器时,上面的css才会设置最后一个div元素的样式

只是为了看看它如何更好地工作 - 这是另一个例子

Answer 4

用公认的答案做了一个不错的小组合

仅当第一个孩子不是唯一的孩子时才将样式应用于第一个孩子..所以当有超过 1 个时

td > div:not(:only-child):first-child { }

Answer 5

CSS-Has 的浏览器支持有限：

但你看：

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

奖金：

td:not(:has(div:only-child))