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 */
}

这非常容易阅读