CSS의 모든 N번째 요소 선택
예를 들어, 요소 집합에서 모든 네 번째 요소를 선택할 수 있습니까?
전: 16개 있습니다.<div>요소...나는 이런 글을 쓸 수 있습니다.
div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)
이것을 하는 더 좋은 방법이 있습니까?
이름에서 알 수 있듯이,:nth-child()를 사용하여 산술식을 구성할 수 있습니다.n상수 이외에 변수가 있습니다.덧셈을 수행할 수 있습니다(+), 뺄셈(-) 및 계수 곱하기 (an어디에a는 양수, 음수 및 0)을 포함하는 정수입니다.
위의 선택기 목록을 다시 작성하는 방법은 다음과 같습니다.
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
...
보시다시피 두 선택기 모두 위와 같은 요소와 일치합니다.이 경우에는 차이가 없습니다.
div:nth-child(4n+4)
참조: http://css-tricks.com/how-nth-child-works/
유사 클래스에 대한 올바른 인수가 필요합니다.
논쟁은 다음과 같은 형태가 되어야 합니다.
an + b모든 아이들과th 일치시킬 수 있을 겁니다둘다요.
a그리고.b는 선택적 정수이며 둘 다 0 또는 음수일 수 있습니다.- 한다면
a0이면 "every a childth" 절이 없습니다. - 한다면
anegative인 경우 매칭은 에서 시작하여 역방향으로 수행됩니다.b. - 한다면
b0 또는 음수이면 양수를 사용하여 동치식을 작성할 수 있습니다.b예.4n+0와 같은4n+4.저도 마찬가지예요.4n-1와 같은4n+3.
- 한다면
예:
4번째 자녀마다 선택(4, 8, 12, ...)
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>1(1, 5, 9, ...)부터 4번째 자녀까지 선택합니다.
li:nth-child(4n+1) {
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>4명으로 구성된 그룹(3명과 4명, 7명과 8명, 11명과 12명, ...)에서 3번째와 4번째 아이를 모두 선택합니다.
/* two selectors are required */
li:nth-child(4n+3),
li:nth-child(4n+4) {
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>처음 4개 항목 선택(4, 3, 2, 1)
/* when a is negative then matching is done backwards */
li:nth-child(-n+4) {
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>이거 먹어봐요.
div:nth-child(4n+4)
언급URL : https://stackoverflow.com/questions/3462298/select-every-nth-element-in-css
'programing' 카테고리의 다른 글
| 제출 시 양식 리디렉션 또는 새로 고침을 방지하시겠습니까? (0) | 2023.11.06 |
|---|---|
| 클릭()에서 jQuery 클릭을 사용하여 앵커를 처리합니다. (0) | 2023.11.06 |
| 파일 목록에서 파일을 제거하는 방법 (0) | 2023.11.06 |
| 오류가 발생한 이유: 그룹 기능이 잘못 사용되었습니까? (0) | 2023.11.06 |
| 가장 짧은 C 프로그램은 여전히 segfault를 유발합니다. (0) | 2023.11.06 |