Html 如果元素有多个子元素，如何添加 CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18738052/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add CSS if element has more than one child?
提问by user348173
I have tdtags and a several divinside td:
我有td标签和几个div里面td：
<td>
<div class='test'></div>
<div class='test'></div>
</td>
<td>
<div class='test'></div>
</td>
I want to add margin-bottomto divif there are more than one in the td. How can I do this with the css?
我想补充margin-bottom到div，如果有一个以上的td。我怎样才能用 css 做到这一点？
回答by mikel
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).
您不能直接在 CSS 中“计算”元素的总数，因此如果有 2 个或更多 div（您需要 JavaScript），则无法仅应用该类。
But a possible workaround is to apply the class to all divs in the td...
但是一个可能的解决方法是将该类应用于 td 中的所有 div...
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.
...然后当只有一个元素时使用不同的样式覆盖/禁用它。当有 2 个以上的子元素时，这间接地允许您添加样式。
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.
或者，您可以在第一个 div 之后应用到每个 div，如果这恰好适合您的情况。
td > div:not(:first-child) {
margin-bottom: 10px;
}
Edit: Or as Itay says in the comment, use a sibling selector
编辑：或者正如 Itay 在评论中所说，使用同级选择器
td > div + div {
margin-bottom: 10px;
}
回答by Danield
Well actually you can do this with css using the nth-last-childselector
好吧，实际上您可以使用nth-last-child选择器使用 css 来做到这一点
So if your markup was like this:
所以如果你的标记是这样的：
<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
CSS
div:nth-last-child(n+2) ~ div:last-child{
margin-bottom: 40px;
}
... the above css will style the last div element only if there exists a container that has at least 2 child divs
... 仅当存在至少具有 2 个子 div 的容器时，上述 css 才会设置最后一个 div 元素的样式
Just to see how this works better - here's another example fiddle
只是为了看看它如何更好地工作 - 这是另一个示例小提琴
回答by jmesa
td > div:not(:only-child) { margin-bottom: 10px; }
回答by Banning Stuckey
did a nice little combo with the accepted answer
用公认的答案做了一个不错的小组合
only applies style to the first child when its NOT the only child.. so when there is more than 1
仅当第一个孩子不是唯一的孩子时才将样式应用于第一个孩子..所以当有超过 1 个时
td > div:not(:only-child):first-child { }
回答by Max Barrass
here you go:
干得好：
td:not(:has(div:first-child:last-child))
bonus
奖金
td:not(:has(div:only-child))
回答by cocco
i think there is no way to add the 10px margin to each div inside a td without the use of css3.
我认为如果不使用 css3，就无法为 td 内的每个 div 添加 10px 边距。
so a solution would be to use javascript and check if there are more than 1 div's inside the td and then if yes add a special class.
所以解决方案是使用 javascript 并检查 td 中是否有超过 1 个 div，如果是，则添加一个特殊类。
css
css
.myMarginClass div{
margin-bottom:10px;
}
js
js
var td=document.getElementsByTagName('td'),
l=td.length;
while(l--){
if(td[l].getElementsByTagName('div').length>1){
td[l].className='myMarginClass';
}
}
else for modern browsers the proper solution is the :only-childproposed by @mikel
否则对于现代浏览器，正确的解决方案是:only-child@mikel 提出的
