jQuery nth-child(even)_jquery와 일치하는 CSS 선택기 패리티를 배우자.

이와 관련하여 CSS3 표준의 nth-child() 사용법을 간략하게 소개하겠습니다:

CSS3 의사 클래스 선택기: nth-child()

nth-child에 대한 간략한 요약 child() 여러 용도로 사용됩니다.

첫 번째: nth-child(number)는 숫자 번째 요소와 직접 일치합니다. 매개변수 번호는 0보다 큰 정수여야 합니다.

(EG) li:nth-child(3){Background:orange;}/*3번째 LI의 배경을 주황색으로 설정*/

두 번째: nth-child( an) a의 배수인 모든 요소와 일치합니다. 매개변수 an의 문자 n은 3n, 5n과 같이 다중쓰기의 기호입니다.
(EG) li:nth-child(3n){Background:orange;}/*3 LI의 배수인 3번째, 6번째, 9번째,...의 배경을 모두 주황색으로 설정*/
세번째 : nth-child(an b) 및 :nth-child(an-b) 첫 번째 그룹 요소, 각 그룹에는 a가 있습니다. b는 그룹 구성원의 일련 번호이며 문자 n과 더하기 기호는 기본값으로 설정할 수 없습니다. , 위치를 바꿀 수 없으며 이는 a와 b가 모두 양의 정수 또는 0인 이 쓰기 방식의 표시입니다. 3n 1, 5n 1과 같은 것입니다. 그러나 더하기 기호는 그룹의 a-b번째 기호와 일치하는 빼기 기호로 변경될 수 있습니다. (실제로 an 앞에 음수 기호가 올 수도 있지만 다음 부분에 남겨두세요.)
(EG)li:nth-child(3n 1){Background:orange;}/*matches the 1st, 4번째, 7번째 ,..., 3개의 각 그룹의 첫 번째 LI*/
li:nth-child(3n 5){Background:orange;}/*5번째, 8번째, 11번째,...와 일치 , 5일, 8일, 11일부터... 첫 번째 LI*/
li:nth-child(5n-1){Background:orange;}/*일치 5일-1=4 및 10일-1 = 9. ..., 5번째 배수 - 1 LI*/
li:nth-child(3n±0){Background:orange;}/*(3n)과 동일*/
li:nth -child (±0n 3){Background:orange;}/*(3)과 동일*/
넷째: nth-child(-an b) 여기서 음수 하나와 양수 하나는 기본값으로 설정할 수 없으며 그렇지 않으면 의미가 없습니다. . 이는 :nth-child(an 1)과 유사하며 둘 다 첫 번째 항목과 일치하지만 차이점은 b번째 자식부터 시작하여 거꾸로 계산하므로 최대 b 이상 일치하지 않는다는 것입니다.
(EG) li:nth-child(-3n 8){배경:orange;}/*8번째, 5번째 및 2번째 LI와 일치*/
li:nth-child(-1n 8) {배경: orange;}/* 또는 (-n 8), 처음 8개(8번째 포함) LI와 일치합니다. 이는 더 실용적이며 처음 N 일치를 제한하는 데 자주 사용됩니다. */

다섯 번째: n번째-자식 (홀수) 및 :nth-child(even)은 요소를 각각 홀수 및 짝수와 일치시킵니다. 홀수(odd)는 (2n 1)과 동일한 결과를 가지며, 짝수(even)는 (2n 0) 및 (2n)과 동일한 결과를 갖습니다.


줄무늬 효과를 얻으려면 jQuery에서 이 방법을 사용하세요.

$("table tr:nth-child(even)").addClass("striped")

다른 매개변수로 대체할 수도 있으며 위에서 설명한 5가지 상황이 모두 허용됩니다.

스트라이프 뒤의 addClass("striped")는 CSS 클래스 이름입니다.

jquery를 배우면서 CSS의 선택자도 배웠습니다.
힘내시길 바랍니다.