html - 如何使用 CSS 仅选择前三个元素

Question

如何使用 :nth-child() 仅选择前三个元素选择器？

section > figure:nth-child( ? ) {
  /* ... */
}

<section>
  <figure>1</figure> <!-- select this -->
  <figure>2</figure> <!-- and this -->
  <figure>3</figure> <!-- and this -->
  <figure>4</figure>
  <figure>5</figure>
  <figure>6</figure>
</section>

Answer 1

你可以这样做:

section > figure:nth-child(-n+3) {background: Aqua}

<section>
  <figure>1</figure>
  <figure>2</figure>
  <figure>3</figure>
  <figure>4</figure>
  <figure>5</figure>
  <figure>6</figure>
</section>