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

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()을 사용해야 합니다.

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

div:nth-of-type(4n)

1 대 0으로 계산

CSS에서 n 변수는 0부터 계산됩니다. 따라서 4n이라는 표현식을 사용하면 인덱스가 0, 4, 8인 요소가 선택됩니다. 에. 1부터 세고 싶다면 대신 4n 1이라는 표현을 사용하면 됩니다.

위 내용은 :nth-child()를 사용하여 CSS에서 모든 N번째 요소를 효율적으로 선택하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!