CSS選擇除前兩個和后兩個之外的所有子元素

Question

我非常好奇（這就是全部）看你如何選擇元素的所有子元素，除了前兩個和后兩個元素。

我有一種方法 ，但這是令人討厭和不可讀的。 必須有一個更清晰的方法，不需要8個偽選擇器。

:not(:nth-child(1)):not(:nth-child(2)):not(:nth-last-child(1)):not(:nth-last-child(2)) {
    background: purple;
}

是的，那太可怕了。 它從字面上選擇所有元素：不是第一個或第二個第一個或最后一個。 必須有一個方法使用2作為半變量，而不是在偽選擇器上堆積。

我想到了另一個 （仍然凌亂）：

:not(:nth-child(-1n+2)):not(:nth-last-child(-1n+2)) {
    background: purple;
}

Answer 1

你甚至不需要:not() 。 :nth-child(n+3):nth-last-child(n+3)工作正常。

在這里查看 。

Answer 2

除了使用之外，我沒有看到任何其他選項:nth-child和:not(:nth-last-child) 。

我的版本： hr:nth-child(n+3):not(:nth-last-child(-n+2))

DEMO

根據:nth-child reference：

:nth-child CSS偽類匹配在文檔樹中具有an+b-1兄弟的元素，對於n的給定正值或零值，並且具有父元素。

換句話說，這個類匹配索引落在集合{ an + b; ∀n ∈ N } { an + b; ∀n ∈ N } 。

所以nth-child(n+3)匹配所有元素，從第三個開始。

:nth-last-child工作方式類似，但是從元素集合的末尾開始，所以:nth-last-child(-n+3)僅匹配從集合結尾開始的2個元素。 因為:not這兩個元素不是從選擇器中排除的。

Answer 3

您可以簡單地將紫色設置為所有元素，然后將其從3個不需要的元素中刪除：

element { background: purple }
element:first-child, element:nth-child(2), element:last-child, element:nth-last-child(2) {
   background: none; /* or whatever you want as background for those */
}

這非常容易閱讀