50

我很好奇（仅此而已），看看您将如何选择除前两个和后两个之外的元素的所有子元素。

我有一个方法，但它很讨厌而且不可读。必须有一个更清晰的方法，不需要 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;
}
4

3 回答 3

76

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

在这里查看。

于 2015-11-17T11:18:10.120 回答
29

:nth-child除了使用and之外，我没有看到任何其他选项:not(:nth-last-child)。

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

演示

根据: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这两个元素被排除在选择器之外。

于 2013-03-24T21:07:00.283 回答
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 */
}

恕我直言更容易阅读

于 2013-03-24T21:12:03.673 回答