选择前三个div元素。

Question

在CSS中，我想选择前三个div。我有这段代码：

div:nth-child(3n) {
  background: red;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore laborum necessitatibus nobis obcaecati, mollitia, eos sint dolor odit. Possimus dolores recusandae sed totam, voluptatibus, voluptatum. Voluptatibus minus aut, quam ratione.
</div>

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates perferendis et saepe omnis nemo, dolores quia ipsam ea blanditiis quaerat autem aut id itaque magnam recusandae sint architecto! Error, consequuntur.
</div>

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem doloremque quis perspiciatis vel odio impedit itaque laborum eveniet quasi aperiam, autem cumque vero recusandae, voluptates et nesciunt quibusdam aliquid! Deleniti.
</div>

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem doloremque quis perspiciatis vel odio impedit itaque laborum eveniet quasi aperiam, autem cumque vero recusandae, voluptates et nesciunt quibusdam aliquid! Deleniti.
</div>

我尝试了上述CSS代码，但它没有生效。

- Corentin Branquet

Answer 1

由于:nth-child(3n)将选择每三个元素，所以它无法按预期工作。

您需要从第三个元素开始向后计数选择每个元素，因此可以使用-n + 3或-1n + 3。

换句话说，在给定模式an+b中，a应为1（或省略），因为您不想跳过元素。此外，a还应为负数，b应为3，因为您从第三个元素开始。

div:nth-child(-1n + 3) {
  background: #f00;
}

<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>

值得指出的是，div:nth-child(-1n + 3) 只会选择前三个元素中也是 div 元素类型的元素。换句话说，如果第三个元素是一个 span，那么只有前两个 div 元素会被选择。

div:nth-child(-1n + 3) {
  background: red;
}

<div>First div</div>
<div>Second div</div>
<span>Span</span>
<div>Third div</div>

如果元素类型不同（如上所示），则应改用 :nth-of-type() 选择器：

div:nth-of-type(-1n + 3) {
  background: red;
}

<div>First div</div>
<div>Second div</div>
<span>Span</span>
<div>Third div</div>

- Josh Crozier