답변:
이름에서 알 수 있듯이 상수와 함께 변수를 사용하여 산술 표현식을 구성 할 수 있습니다 . 넌 (또한 수행 할 수있다 ), 감산 ( )와 계수를 승산 ( 양수, 음수를 제로를 포함한 정수이다).:nth-child()n+-ana
위의 선택기 목록을 다시 작성하는 방법은 다음과 같습니다.
div:nth-child(4n)이러한 산술 표현식의 작동 방식에 대한 설명은 이 질문에 대한 나의 대답 과 스펙을 참조하십시오 .
이 답변은 동일한 부모 요소 내의 모든 자식 요소가 같은 요소 유형 인 것으로 가정합니다 div. 당신과 같은 다른 유형의 다른 요소가있는 경우 h1또는 p, 당신은 사용해야합니다 :nth-of-type()대신 :nth-child()당신은 단지 계산하기 위해 div요소를 :
<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>임의의 선택기와 일치하는 n 번째 자식을 찾고있는 다른 모든 클래스 (속성, 속성 또는 이들의 조합)의 경우 순수한 CSS 선택기로이 작업을 수행 할 수 없습니다. 이 질문에 대한 나의 대답을보십시오 .
그런데 4n과 4n + 4 사이의 차이는별로 없습니다 :nth-child(). n변수 를 사용하면 0부터 계산을 시작합니다. 각 선택기가 일치하는 것입니다.
:nth-child(4n)
4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...:nth-child(4n+4)
4(0) + 4 = 0 + 4 = 4
4(1) + 4 = 4 + 4 = 8
4(2) + 4 = 8 + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...보시다시피, 두 선택기는 위와 동일한 요소와 일치합니다. 이 경우 차이가 없습니다.
tr td:nth-child(4). 괄호 안에 n이 없음을주의하십시오
div:nth-child(4n+4) nth-child의사 클래스에 대한 올바른 인수가 필요합니다 .
인수의 형태에 있어야 an + b모든 일치하는 일 B에서 시작하는 아이입니다.
모두 a와 b선택 정수 모두가 제로 또는 마이너스가 될 수 있습니다.
a제로 다음 더 없다 "모든 번째 아이" 절.a부정적인 다음 매칭이 완료되고 이전 버전은에서 시작 b.b, 제로 또는 네거티브이다 포지티브하여 등가 식 작성 가능 b예 것은 4n+0동일이다 4n+4. 마찬가지로 4n-1동일하다 4n+3.예 :
li:nth-child(4n) {
background: yellow;
}<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>