CSS：n-child(偶数)但不能被3整除

1. 什么是n-child

n-child是CSS选择器中的一个方法，它用来选中某个父元素下的n个子元素。例如：

/* 选择第二个子元素 */
:nth-child(2)
/* 选择偶数个子元素 */
:nth-child(even)
/* 选择被3整除的子元素 */
:nth-child(3n)

2. 选择偶数个子元素

选择偶数个子元素，我们可以使用:nth-child(even)选择器。例如，下面的代码可以选中其父元素下所有偶数个子元素：

父元素:nth-child(even)

但是，在这些偶数个子元素中，我们需要进一步排除被3整除的元素，我们可以使用伪类选择器:not()来排除。

2.1 排除被3整除的子元素

使用:not()可以排除某些元素。例如，下面的代码可以选中其父元素下所有偶数个子元素，但不选中被3整除的元素：

父元素:nth-child(even):not(:nth-child(3n))

这样，我们就成功的选中了所有偶数个子元素但不被3整除的元素。

2.2 将以上选择器合并

我们可以将以上两个选择器合并，生成以下代码：

父元素:nth-child(even):not(:nth-child(3n))

这样，我们就成功的选中了所有偶数个子元素但不被3整除的元素。下面是一段示例代码：

<div class="parent">
    <p>第一个子元素</p>
    <p>第二个子元素</p>
    <p>第三个子元素</p>
    <p>第四个子元素</p>
    <p>第五个子元素</p>
    <p>第六个子元素</p>
    <p>第七个子元素</p>
    <p>第八个子元素</p>
</div>
<style>
.parent:nth-child(even):not(:nth-child(3n)) p {
    background-color: blue;
}
</style>

上面的代码选择了偶数个子元素中除了被3整除的子元素外，所有的子元素，并设置了它们的背景颜色为蓝色。