모든 선택기와 함께 :nth-child() 또는 :nth-of-type()을 사용할 수 있습니까?

Question

선택기와 일치하는(또는 일치하지 않는) n번째 하위 요소를 선택하는 방법이 있나요? 예를 들어, 홀수 테이블 행을 모두 선택하고 행의 하위 집합을 선택하고 싶습니다.

으아악 으아악

하지만 :nth-child()는 "row" 클래스인지 여부에 관계없이 모든 tr 요소를 계산하는 것 같아서 :nth-child() 似乎只是计算所有 tr 元素，无论它们是否属于“row”类，所以我最终得到了一个 even “行”元素而不是我正在寻找的两个元素。 :nth-of-type()even

"로 끝납니다. 내가 찾고 있는 두 요소 대신에 row" 요소를 사용합니다. :nth-of-type()에서도 같은 일이 발생합니다.

이유를 설명해 주실 분 계신가요? 🎜

Answer 1

사실이 아닙니다..

문서에서 인용

클래스와 결합되지 않고 자체 선택자입니다. 규칙에서는 두 선택기만 만족하면 되므로 :nth-child(even) 테이블 행에도 .row代码> 클래스가 있는 경우입니다.

Answer 2

이것은 :nth-child(An+B) 和 :nth-of-type() 작동 방식에 대한 오해로 인해 발생하는 매우 일반적인 질문입니다.

레벨 3 선택기에서 :nth-child () 의사 클래스 는 동일한 상위 아래에 있는 모든 형제를 계산합니다. 나머지 선택기와 일치하는 형제 항목만 계산하는 것이 아닙니다.

마찬가지로 :nth-of- type() 의사 클래스 는 동일한 요소 유형을 공유하는 형제 요소를 계산합니다. 이는 나머지 선택기 대신 HTML의 태그 이름을 참조합니다.

이는 또한 동일한 상위의 모든 하위 항목이 동일한 요소 유형을 갖는 경우, 예를 들어 유일한 하위 항목이 tr 元素，或者列表元素的唯一子级是子元素是 li 元素，那么 :nth-child() 和 :nth-of-type() 将表现相同，即对于每个值An+B、:nth-child(An+B) 和 :nth-of-type(An+B)인 테이블 본문은 동일한 요소 세트와 일치한다는 것을 의미합니다. p>

사실, 주어진 복합 선택기 내의 모든 단순 선택기(:nth-child() 和 :not()와 같은 가상 클래스 포함)는 선택기의 나머지 부분과 일치하는 요소의 하위 집합 을 보는 대신 서로 독립적으로 작동합니다.

이는 또한 각 개별 복합 선택기 내의 단순 선택기 사이에 순서 개념이 없다는 것을 의미합니다. ¹ 이는 예를 들어 다음 두 선택기가 동일하다는 것을 의미합니다. p> 으아아아

영어로 번역하면 모두 다음을 의미합니다.

^{(여기서는 요점을 명확하게 설명하기 위해 순서가 지정되지 않은 목록을 사용하고 있음을 알 수 있습니다)}

선택기 레벨 4는 아래의 기존 선택기 구문에 따라 복합 선택기의 선택기가 서로 독립적으로 작동하는 방식으로 인해 来纠正此限制:nth-child(An+B of S)²을 허용하여 임의의 선택기 매개변수 S를 허용하려고 시도합니다. 따라서 귀하의 경우에는 다음과 같습니다:

으아아아

물론 새로운 사양의 새로운 제안으로서