CSS 如何使用CSS选择器选择除第一个和最后一个之外的所有子项
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/13981111/
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 select all children except first and last with CSS selectors
提问by gsingh2011
How would I select all the children in a table except for the first and last? I've tried this, but it ends up selecting all children that aren't first and all children that aren't last, which ends up being all children:
除了第一个和最后一个之外,我如何选择表格中的所有孩子?我试过这个,但它最终选择了所有不是第一个的孩子和所有不是最后的孩子,最终成为所有孩子:
table.programs tr td:not(:first-child), table.programs tr td:not(:last-child) {
}
I want all children that are neither first nor last. How can I do this?
我想要所有既不是第一个也不是最后一个的孩子。我怎样才能做到这一点?
回答by Jukka K. Korpela
Use two :not()
selectors combined, thereby referring to elements that match both of them, i.e. to elements that match neither of the selectors used as operands of :not()
:
:not()
组合使用两个选择器,从而引用与它们都匹配的元素,即与用作操作数的两个选择器都不匹配的元素:not()
:
table.programs td:not(:first-child):not(:last-child)
回答by Simone
The jQuery solution is fine, but if you want to do it in pure CSS I'd suggest you to apply the rules to the whole table and then resetthem for the first and last children. i.e:
jQuery 解决方案很好,但如果你想用纯 CSS 来做,我建议你将规则应用于整个表格,然后为第一个和最后一个孩子重置它们。IE:
table.programs tr td {
/* your rules here */
}
table.programs tr:first-child td:first-child,
table.programs tr:last-child td:last-child {
/* reset your rules here */
}
回答by Aakil Fernandes
I think this should work for you:
我认为这应该适合你:
table.programs tr td:not(:first-child,:last-child)
回答by Hos715
It works in this way
它以这种方式工作
table.programs tr td:nth-child(1n+2):not(:last-child)
回答by Icado
like this.
像这样。
li:nth-child(n+2):nth-last-child(n+2) { background: red; }
for your requirement
满足您的要求
table.programs tr td:nth-child(n+2):nth-last-child(n+2) { /* Your Style */ }