CSS选择除前两个和后两个之外的所有子元素

I'm very curious (that's all) to see how you would select all children of an element except the first two and last two.

我很好奇(仅此而已)，看看如何选择一个元素的所有子元素，除了前两个和后两个。

I've a method, but it's nasty and unreadable. There must be a much clearer method that doesn't need 8 pseudo-selectors.

我有一个方法，但它是讨厌的和不可读的。必须有一个更清晰的方法，不需要8个伪选择器。

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

Yeah, that's pretty horrible. It literally selects all elements that are :not the first or second first or last. There must be a method that uses 2 as a semi-variable, instead of piling on pseudo-selectors.

是的,那是很可怕的。它从字面上选择所有的元素:不是第一或第二优先或最后。必须有一个使用2作为半变量的方法，而不是堆在伪选择器上。

I thought of another one (still messy):

我想到了另一个(仍然很乱):

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

3 个解决方案

#1

You don't even need :not(). :nth-child(n+3):nth-last-child(n+3) works fine.

你甚至不需要:not()。:nth-child(n + 3):nth-last-child(n + 3)没问题。

Check it out here.

检查出来。

#2

I don't see any other option than using :nth-child and :not(:nth-last-child).

我没有看到任何其他的选择，除了使用:nth-child和:not(:nth-last-child)。

My version: hr:nth-child(n+3):not(:nth-last-child(-n+2))

我的版本:人力资源:nth-child(n + 3):没有(:nth-last-child(n + 2))

DEMO

演示

According to :nth-child reference:

据:nth-child参考:

The :nth-child CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element.

n -child CSS伪类匹配一个元素，该元素在文档树中之前有一个+b-1的兄弟元素，对于给定的正的或零的值为n，并且有一个父元素。

In other words, this class matches all children whose index fall in the set { an + b; ∀n ∈ N }.

换句话说，这个类匹配所有索引位于集合{an + b;∀n∈n }。

So nth-child(n+3) matches all elements, starting from the third one.

所以n -child(n+3)匹配所有元素，从第三个开始。

:nth-last-child works similar, but from the end of element collection, so :nth-last-child(-n+3) matches only 2 elements starting from the end of collection. Because of :not these 2 elements are excluded from selector.

:n -last-child工作原理类似，但是从元素集合的末尾开始，所以:n -last-child(-n+3)只匹配从集合结束开始的两个元素。因为:不是这两个元素被排除在选择器之外。

#3

You could simply set your purple to all elements, and then remove it from the 3 unwanted ones:

你可以将紫色设置为所有元素，然后从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 */
}

Thats imho much easier to read

读起来要容易得多

#1