如果元素有多个孩子,如何添加CSS? [英] How to add CSS if element has more than one child?
问题描述
我有 td
标记,并且在 td $ c $内有多个
div
c>:
< td>
< div class ='test'>< / div>
< div class ='test'>< / div>
< / td>
< td>
< div class ='test'>< / div>
< / td>
我想将 margin-bottom
添加到 div
如果 td
中有多个。我怎样才能用CSS来做到这一点?
你不能直接'计数'CSS中的元素总数,所以如果有2个或更多div(你需要使用JavaScript),没有办法只应用这个类。
但是可能的解决方法是将类应用于所有在td的div ...
td> div {
margin-bottom:10px;
}
...然后使用不同的样式覆盖/禁用它一个元素。这可以间接地让你在有2+以上的子元素时添加样式。
td> div:只有孩子{
margin-bottom:0px;
}
或者,您可以在第一个div后应用于每个div,为你的情况工作。
td> div:not(:first-child){
margin-bottom:10px;
编辑:或者正如itay在评论中所说的,使用兄弟选择器 p>
td> div + div {
margin-bottom:10px;
}
I have td
tags and a several div
inside td
:
<td>
<div class='test'></div>
<div class='test'></div>
</td>
<td>
<div class='test'></div>
</td>
I want to add margin-bottom
to div
if there are more than one in the td
. How can I do this with the css?
解决方案 You can't directly 'count' total numbers of elements in CSS, so there's no way to only apply the class if there's 2 or more divs (you'd need JavaScript for that).
But a possible workaround is to apply the class to all divs in the td...
td > div {
margin-bottom: 10px;
}
... and then override/disable it with a different style when there's only one element. That indirectly lets you add the style when there's 2+ more child elements.
td > div:only-child {
margin-bottom: 0px;
}
Alternatively you can apply to every div after the first one, if that happens to work for your situation.
td > div:not(:first-child) {
margin-bottom: 10px;
}
Edit: Or as Itay says in the comment, use a sibling selector
td > div + div {
margin-bottom: 10px;
}
这篇关于如果元素有多个孩子,如何添加CSS?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!