:nth-child()를 사용하여 CSS에서 모든 N번째 요소를 효율적으로 선택하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

:nth-child()를 사용하여 CSS에서 모든 N번째 요소를 효율적으로 선택하려면 어떻게 해야 합니까?

Mary-Kate Olsen

풀어 주다： 2024-12-22 10:26:40

원래의

465명이 탐색했습니다.

How Can I Efficiently Select Every Nth Element in CSS Using :nth-child()?

CSS에서 N번째 요소마다 선택

요소 집합을 처리할 때 일정한 간격으로 특정 요소를 선택해야 하는 경우가 많습니다. 예를 들어, 4번째, 6번째 또는 10번째 요소마다 선택할 수 있습니다. 전통적으로 이는 다음과 같이 각 n번째 요소를 명시적으로 지정하여 달성되었습니다.

div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)

로그인 후 복사

그러나 :nth-child() 선택기를 사용하여 이를 달성하는 더 효율적인 방법이 있습니다.

":nth-child()" 선택기 사용

:nth-child() 선택기를 사용하면 다음을 구성할 수 있습니다. n 변수를 사용한 산술 표현식. 즉, 덧셈, 뺄셈 및 계수 곱셈을 수행할 수 있습니다.

네 번째 요소를 모두 선택하려면 다음 선택기를 사용합니다.

div:nth-child(4n)

로그인 후 복사

이 표현식은 모든 요소와 일치한다는 의미입니다. 그것은 0n, 4n, 8n 등입니다.

다른 요소 처리 유형

이 표현식은 모든 하위 요소가 동일한 유형이라고 가정한다는 점에 유의하는 것이 중요합니다. h1 또는 p와 같은 다른 유형의 요소가 있는 경우 대신 :nth-of-type()을 사용해야 합니다.

<body>
  <h1></h1>
  <div>1</div>  <div>2</div>
  <div>3</div>  <div>4</div>
  <h2></h2>
  <div>5</div>  <div>6</div>
  <div>7</div>  <div>8</div>
  <h2></h2>
  <div>9</div>  <div>10</div>
  <div>11</div> <div>12</div>
  <h2></h2>
  <div>13</div> <div>14</div>
  <div>15</div> <div>16</div>
</body>

로그인 후 복사