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

本文介绍了如何使用CSS仅选择前三个元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

How can I select only first three elements with the :nth-child() selector?

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>

推荐答案

您可以这样做:

section > figure:nth-child(-n+3) {
  border: 1px solid;
}

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

这篇关于如何使用CSS仅选择前三个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！