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选择除前两位和后两位以外的所有子元素

回答

相关问题