有沒有辦法為“除第一個/最后一個元素之外的所有元素”指定一個 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)

和往常一樣，CSS3 的:not()和:last-child直到 IE9+ 和其他瀏覽器的相對較新版本才被支持。 除非您使用 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% 的情況，然后“被遺忘的”選擇器的 rest 覆蓋了另外百分之幾，之后你需要添加一些類，這些類在這一頁。

Answer 3

那么，你可以這樣做：

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

但是只有最新的瀏覽器才支持:not偽類。

除此之外，沒有。 您最好的選擇是為所有人指定一個樣式，然后為第一個/最后一個覆蓋它。

Answer 4

我建議使用first-of-type ：

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

瀏覽器支持 ( caniuse )