有什么方法可以为“除第一个/最后一个之外的所有元素”指定 CSS 简写？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10033299/
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
Is there any way to specify a CSS shorthand for "all elements except the first/last"?
提问by julien_c
Very often, it's natural to need to specify a CSS style for all elements except the first (or the last). For example, when styling paragraphs, you wish to add a bottom margin to every element except the last one (or similarly, a top margin to every element except the first one).
通常，需要为除第一个（或最后一个）元素之外的所有元素指定 CSS 样式是很自然的。例如，在设置段落样式时，您希望为除最后一个元素之外的每个元素添加一个底部边距（或者类似地，为除第一个元素之外的每个元素添加一个顶部边距）。
Is there any way to do that that's :
有没有办法做到这一点：
- more concise than defining
p {...}and thenp:first-child {...}? - more straightforward and intuitive than
p:nth-child(-n+1)?
- 比定义
p {...}然后更简洁p:first-child {...}？ - 比
p:nth-child(-n+1)?
If there is not, do you know of any attempt at adding it?
如果没有，您是否知道尝试添加它？
回答by BoltClock
For all pelements except the first child, use either one of these (the second one is better-supported):
对于p除第一个子元素之外的所有元素，请使用以下任一元素（第二个元素得到更好的支持）：
p:not(:first-child)
p:first-child ~ p
For all pelements except the last child:
对于p除最后一个子元素之外的所有元素：
p:not(:last-child)
For all pelements except the first and the last children:
对于p除第一个和最后一个孩子之外的所有元素：
p:not(:first-child):not(:last-child)
As usual, CSS3's :not()and :last-childaren't supported until IE9+ and relatively new versions of other browsers. You're not going to reach very far in terms of browser support (IE8 and older) unless you add classes to your first and last children, using JavaScript or otherwise.
像往常一样，直到 IE9+ 和其他浏览器的相对较新版本才支持CSS3:not()和:last-child。除非您使用 JavaScript 或其他方式向第一个和最后一个孩子添加类，否则您不会在浏览器支持（IE8 及更早版本）方面取得很大进展。
Remember that vertical margins collapse between in-flow paragraphs and their ancestor(s), so unless you want to zero out the margins of the container element for these paragraphs as well, you shouldn't need to zero out the margins of the first and last pelements specifically. Here's a fiddleto illustrate.
请记住，流入段落与其祖先之间的垂直边距会塌陷，因此除非您还想将这些段落的容器元素的边距归零，否则您不需要将第一个和它们的边距归零特别是最后一个p元素。这里有一个小提琴来说明。
回答by Niet the Dark Absol
Well, you could do:
好吧，你可以这样做：
p:not(:first-child) {...}
But only the most recent browsers support the :notpsuedo-class.
但只有最新的浏览器支持:not伪类。
Other than that, no. Your best option is to specify a style for all and then override it for the first/last.
除此之外，没有。您最好的选择是为所有人指定一个样式，然后为第一个/最后一个覆盖它。
回答by sg3s
If IE7-8 support is not needed you can use the :not()CSS selector.
如果不需要 IE7-8 支持，您可以使用:not()CSS 选择器。
But if you need to support IE7+, which may still be the case there is a little trick you can use and usually gets you fairly far. A lesser known fact is that the :first-childpsuedo selector actually works in IE7+ (not :last-childthough) as are some other css selectorsand this makes stuff like adding vertical margins in a horizontally floated layout possible.
但是，如果您需要支持 IE7+，这可能仍然是这种情况，您可以使用一些小技巧，通常可以让您走得更远。一个鲜为人知的事实是，:first-child伪选择器实际上在 IE7+ 中工作（:last-child虽然不是），就像其他一些 css 选择器一样，这使得在水平浮动布局中添加垂直边距之类的东西成为可能。
Imagine this html:
想象一下这个html：
<ul>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
</ul>
And this as some CSS:
这是一些CSS：
/* General reset */
ul, li { list-type: none; margin: 0; padding: 0; }
/* Make horizontal */
ul > li { float: left; }
So now all list items are horizontally next to each other, and now we want to add a margin in BETWEEN all items but not on the right or left side, we can do this in css:
所以现在所有列表项都水平地彼此相邻，现在我们想在所有项之间添加一个边距，但不是在右侧或左侧，我们可以在 css 中做到这一点：
/* General reset */
ul, li { list-type: none; margin: 0; padding: 0; }
/* Make horizontal */
ul > li { float: left; margin-left: 10px; }
ul > li:first-child { margin-left: 0; }
This usually covers 95% of the cases where I want something unique, then the rest of the 'forgotten' selectors cover another few percent, after that you need to add some classes which usually isn't much of a bottleneck anyway in the backend of the page.
这通常涵盖了 95% 的情况，我想要一些独特的东西，然后其余的“被遗忘的”选择器涵盖了另外几个百分点，之后您需要添加一些通常在后端通常不会成为瓶颈的类这一页。
回答by David Morales
I would suggest to use first-of-type:
我建议使用first-of-type：
p:not(:first-of-type) { ... }
