Question

我在td内有div个标签和多个td：

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

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

如果margin-bottom中有多个div，我想将td添加到{{1}}。我怎么能用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

实际上，您可以使用nth-last-child选择器

使用css执行此操作

<强> FIDDLE

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

<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元素的样式

只是为了看看它如何运作得更好 - 这是另一个 example fiddle

Answer 3

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

Answer 4

我认为没有办法在不使用css3的情况下为td内的每个div添加10px的边距。

所以解决方法是使用javascript并检查td中是否有超过1个div，然后如果是，则添加一个特殊类。

CSS

.myMarginClass div{
 margin-bottom:10px;
}

JS

var td=document.getElementsByTagName('td'),
l=td.length;
while(l--){
 if(td[l].getElementsByTagName('div').length>1){
  td[l].className='myMarginClass';
 }
}

对于现代浏览器而言，正确的解决方案是:only-child 由@mikel提出

Answer 5

用接受的答案做了一个很好的小组合

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

时

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

Answer 6

你去：

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

奖金

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

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

6 个答案:

CSS