css - 有没有办法为“除第一个/最后一个元素之外的所有元素”指定一个 CSS 简写？

Question

很多时候，需要为除第一个（或最后一个）元素之外的所有元素指定 CSS 样式是很自然的。例如，在设置段落样式时，您希望为除最后一个元素之外的每个元素添加下边距（或者类似地，为除第一个元素之外的每个元素添加上边距）。

有没有办法做到这一点：

• 比定义更简洁p {...}，然后p:first-child {...}？
• 比p:nth-child(-n+1)?更直接和直观

如果没有，您是否知道添加它的任何尝试？

Answer 1

对于p除第一个子元素之外的所有元素，请使用其中之一（第二个元素得到更好的支持）：

p:not(:first-child)
p:first-child ~ p

对于p除最后一个子元素之外的所有元素：

p:not(:last-child)

对于p除第一个和最后一个子元素之外的所有元素：

p:not(:first-child):not(:last-child)

像往常一样，直到 IE9+:not()和:last-child其他浏览器的相对较新版本才支持 CSS3。除非您使用 JavaScript 或其他方式为您的第一个和最后一个孩子添加类，否则您在浏览器支持（IE8 和更早版本）方面不会走得太远。

请记住，流入段落和它们的祖先之间的垂直边距折叠，所以除非您也想将这些段落的容器元素的边距归零，否则您不需要将第一个和它们的边距归零。最后一个p元素。这是一个小提琴来说明。

Answer 2

如果不需要 IE7-8 支持，您可以使用:not()CSS 选择器，例如：

p:not(:first-child) {
    ...
}

但是，如果您需要支持 IE7+，可能仍然存在这种情况，您可以使用一个小技巧，通常可以让您走得更远。一个鲜为人知的事实是，:first-child伪选择器实际上可以在 IE7+ 中工作（:last-child虽然不是），就像其他一些 css 选择器一样，这使得在水平浮动布局中添加垂直边距之类的东西成为可能。

想象一下这个html：

<ul>
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
    <li>Item #4</li>
</ul>

这是一些CSS：

/* General reset */
ul, li { list-type: none; margin: 0; padding: 0; }
/* Make horizontal */
ul > li { float: left; }

所以现在所有列表项都是水平相邻的，现在我们想在所有项目之间添加一个边距，但不是在右侧或左侧，我们可以在 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; }

这通常涵盖了 95% 的情况，我想要一些独特的东西，然后其余的“被遗忘”选择器涵盖另外几个百分比，之后您需要添加一些通常在后端中通常不会成为瓶颈的类这页纸。

Answer 3

好吧，你可以这样做：

p:not(:first-child) {...}

但只有最新的浏览器支持:not伪类。

除此之外，没有。您最好的选择是为所有人指定一个样式，然后为第一个/最后一个覆盖它。

Answer 4

我建议使用first-of-type：

p:not(:first-of-type) { ... }

浏览器支持（caniuse）