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 +和其他浏览器的相对较新版本之前，不支持CSS3的:not()和:last-child。除非您使用JavaScript或其他方式为您的第一个和最后一个孩子添加课程，否则您不会在浏览器支持（IE8及更早版本）方面达到很远。

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

Answer 2

嗯，你可以这样做：

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

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

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

Answer 3

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

但是如果你需要支持IE7 +，可能仍然会出现这种情况，你可以使用一些技巧，通常会让你相当远。一个鲜为人知的事实是:first-child psuedo选择器实际上在IE7 +中工作（不是:last-child），而some other css selectors也是如此，这使得在水平浮动布局中添加垂直边距等事情成为可能。< / p>

想象一下这个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; }

所以现在所有列表项都是水平相邻的，现在我们想在BETWEEN中添加一个边距但不在右侧或左侧，我们可以在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％我想要一些独特的案例，然后是'forgotten' selectors cover another few percent的其余部分，之后你需要添加一些通常在后端没有太多瓶颈的类。页面。

Answer 4

我建议使用first-of-type：

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

Browser support (caniuse)

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

4 个答案: