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参考:

在:nth-childCSS伪类匹配的是有一个元素an+b-1的兄弟姐妹之前在文档树,对于给定的正或零值n,并且有一个父元素.

换句话说,此类匹配其索引落在集合中的所有子项{ an + b; ?n ? N }.

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

:nth-last-child工作方式类似,但从元素集合:nth-last-child(-n+3)的末尾开始,因此只从集合的末尾开始匹配2个元素.因为:not这两个元素被排除在选择器之外.