html之如果元素有多个子元素，如何添加 CSS

我有 td 标签和几个 div 里面的 td:

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

如果 td 中有多个，我想将 margin-bottom 添加到 div 中。我如何使用 css 执行此操作？

请您参考如下方法:

您无法直接“计算”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; 
}