选择三个第一个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,但它不起作用.

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.换句话说,如果第三个元素是a 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>