CSS選擇除前兩位和後兩位以外的所有子元素

我非常好奇（這就是全部），以瞭解如何選擇除前兩位和後兩位元素之外的所有子元素。CSS選擇除前兩位和後兩位以外的所有子元素

I've a method，但它很討厭，難以理解。必須有一個更清晰的方法，不需要8個僞選擇器。

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

是的，這是非常可怕的。它從字面上選擇所有元素：不是第一個或第二個第一個或最後一個。必須有一種方法使用2作爲半變量，而不是在僞選擇器上堆積。

I thought of another one（仍然凌亂）：

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

來源

2013-03-24 Rudie

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

看看here。

來源

2015-11-17 11:18:10 spikyjt

我沒有看到比使用:nth-child和:not(:nth-last-child)任何其他選項。

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

DEMO

根據:nth-child參考：

的:nth-child CSS僞類匹配具有an+b-1兄弟姐妹之前在文檔樹中的元素，對於給n的正值或零值，並有一個父元素。

換句話說，這個班級匹配所有索引落在集合{ an + b; ∀n ∈ N }中的孩子。

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

:nth-last-child作品類似，但從元素集合結束，所以:nth-last-child(-n+3)只匹配從收集結束開始的兩個元素。由於:not這兩個元素被排除在選擇器之外。

來源

2013-03-24 21:07:00 MarcinJuraszek

在我的情況下（n + 2）只選擇第一個元素。但是（n + 3）解決了這個問題。 – 2013-03-24 21:09:31

是的，'n + 2'會包含第二個。只是一個'：不是'，然後是2和3，看起來很奇怪=） – Rudie 2013-03-24 21:11:03

好吧，我誤解了*的第一個和最後兩個*部分的問題。更新我的答案和小提琴。 – MarcinJuraszek 2013-03-24 21:24:31

你可以簡單地設置您的紫色所有元素，然後從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 */ 
}

那恕我直言，更易於閱讀

來源

2013-03-24 21:12:03 darthmaim

對於3個元素而不是4個，請將您的問題解讀爲「（first）and（last two）」而不是「（first and last）（two）」。你沒有說任何關於有6個屬性的東西。如果您的情況太複雜，請繼續使用另一個答案。這只是另一種可能性，可能適用於某些人。 – darthmaim 2013-03-24 21:21:25

CSS選擇除前兩位和後兩位以外的所有子元素

回答

相關問題