:nth-child()를 사용하여 CSS에서 모든 N번째 요소를 효율적으로 선택하려면 어떻게 해야 합니까?
- Mary-Kate Olsen원래의
- 2024-12-22 10:26:40463검색
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>
div:nth-of-type(4n)
1 대 0으로 계산
CSS에서 n 변수는 0부터 계산됩니다. 따라서 4n이라는 표현식을 사용하면 인덱스가 0, 4, 8인 요소가 선택됩니다. 에. 1부터 세고 싶다면 대신 4n 1이라는 표현을 사용하면 됩니다.
위 내용은 :nth-child()를 사용하여 CSS에서 모든 N번째 요소를 효율적으로 선택하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.