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

Posted 2021-04-18

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

有没有办法做到这一点：

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

如果没有，你知道有任何添加它的尝试吗？

答案

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

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

除了最后一个孩子之外的所有p元素：

p:not(:last-child)

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

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

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

请记住vertical margins collapse between in-flow paragraphs and their ancestor(s)，所以除非你想将这些段落的容器元素的边距归零，否则你不应该特别将第一个和最后一个p元素的边距归零。这是一个fiddle来说明。

另一答案

好吧，你可以这样做：

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

但只有最新的浏览器支持qazxsw poi伪类。

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

另一答案

如果不需要IE7-8支持，您可以使用:not。

但是如果你需要支持IE7 +，可能仍然会出现这种情况，你可以使用一些技巧，通常会让你相当远。一个鲜为人知的事实是:not() CSS selector psuedo选择器实际上在IE7 +中工作（虽然不是:first-child）和:last-child一样，这使得像在水平浮动布局中添加垂直边距这样的东西成为可能。

想象一下这个html：

some other css selectors

这就像一些CSS：

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

所以现在所有列表项都是水平相邻的，现在我们想在BETWEEN所有项目中添加一个边距但不在右侧或左侧，我们可以在css中执行此操作：

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

这通常涵盖95％我想要一些独特的情况，然后是/* 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; } 的其余部分，之后你需要添加一些通常在页面后端通常不会成为瓶颈的类。

另一答案

我建议使用'forgotten' selectors cover another few percent：

first-of-type

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