CSS에서 N번째 요소를 효율적으로 선택하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

CSS에서 N번째 요소를 효율적으로 선택하려면 어떻게 해야 합니까?

Patricia Arquette

풀어 주다： 2024-12-24 20:28:11

원래의

648명이 탐색했습니다.

How Can I Efficiently Select Every Nth Element in CSS?

CSS에서 모든 N번째 요소를 선택하세요

질문:

CSS에서 모든 n번째 요소를 선택하는 효율적인 방법이 있나요? 각 요소를 나열하지 않고 요소 집합 개별적으로?

답변:

예, 산술 표현식과 함께 :nth-child() 의사 클래스를 사용하면 요소를 기반으로 선택할 수 있습니다. 하위 목록에서의 위치에 따라 달라집니다.

구문 :nth-child()는 다음을 포함한 다양한 산술 연산을 허용합니다.

덧셈( )
뺄셈(-)
계수 곱셈 (an)

예를 들어 네 번째 요소를 모두 선택하려면 다음을 사용하세요. 다음 선택기:

:nth-child(4n)

로그인 후 복사

이 표현식은 0부터 계산을 시작하므로 다음을 선택합니다.

4(0번째 자식)
8(첫 번째 자식) )
12(둘째)
16(셋째) child)

참고: 상위 요소 내에 다양한 유형의 요소(예: div, h1, p)가 있는 경우 :nth-of를 사용해야 합니다. :nth-child() 대신 -type()을 사용하여 지정된 요소만 계산하도록 합니다. type.

예:

다음 HTML을 가정합니다.

<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>

로그인 후 복사

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