임의의 선택기와 결합할 수 있는 방법은 의사 클래스 :nth-child() 또는 :nth-of-type()에서 다른 선택기를 사용하는 것입니다.

Question

임의 선택기를 만족하는(또는 만족하지 않는) 모든 n번째 하위 요소를 선택하는 방법이 있나요? 예를 들어, 테이블의 모든 홀수 행을 선택하되 행의 하위 집합 내에서 선택하고 싶습니다.

table.myClass tr.row:nth-child(odd) {
  ...
}

<table class="myClass">
  <tr>
    <td>행
  <tr class="row"> <!-- 이걸 원해요 -->
    <td>행
  <tr class="행">
    <td>행
  <tr class="row"> <!-- 그리고 이건 -->
    <td>행
</테이블>

그러나 :nth-child()는 "행" 유형인지 여부에 관계없이 모든 tr 요소만 계산하는 것 같습니다. 내가 얻는 것은 내가 찾고 있는 두 개가 아닌 하나의 even "행" 요소입니다. :nth-of-type()에서도 같은 일이 발생합니다.

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

Answer 1

사실이 아닙니다..

문서 인용

클래스와 결합되지 않은 독립형 선택기입니다. 규칙에서는 두 선택자를 모두 만족시키기만 하면 되므로 :nth-child(even)表格行也有.row 클래스인 경우 표시됩니다.

Answer 2

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

선택기 레벨 3에서 :nth-child()pseudo-class는 나머지 선택기와 일치하는 항목뿐만 아니라 동일한 상위 요소 아래의 모든 형제 간의 위치를 ​​계산합니다.

마찬가지로 :nth-of-type()pseudo-class는 동일한 요소 유형을 공유하는 형제를 계산합니다. 이는 HTML에서 나머지 선택기가 아닌 표시기 서명입니다.

또한 동일한 상위 요소의 모든 하위 요소가 동일한 요소 유형인 경우(예: tr元素或列表元素只有li元素，那么:nth-child()和:nth-of-type()的行为将是相同的，即对于每个An+B的值，:nth-child(An+B)和:nth-of-type(An+B) 요소만 있는 테이블 본문 또는 li 요소만 있는 목록 요소)의 동작은 다음과 같습니다.

및

는 동일합니다. 즉, An+B의 각 값에 대해 :nth-child(An+B) 및 :nth-of-type(An+B)입니다. 는 동일한 요소 집합과 일치합니다. :nth-child()和:not() 실제로 및 :not()와 같은 의사 클래스를 포함하여 주어진 복합 선택기 내의 모든 단순 선택기는 선택기에 의해 표시되지 않고 독립적으로 작동합니다. 나머지 매칭

하위 집합

요소. 이는 또한 ^{각 개별 복합 선택기 내에서 단순 선택기 간의 순서 개념이 없다는 것을 의미합니다.}

1

이는 예를 들어 다음 두 선택기가 동일함을 의미합니다.

으아악

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

(여기서는 요점을 강조하기 위해 순서가 지정되지 않은 목록을 사용했음을 알 수 있습니다.)

:nth-child(An+B of S)선택기 레벨 4는 기존 선택기 구문에 따라 복합 선택기 내에서 독립적으로 작동하는 선택기로 인해

2

에서 임의의 선택기 인수 S를 허용함으로써 이 제한을 수정하려고 합니다. 따라서 귀하의 경우에는 다음과 같습니다: 으아악 물론 완전히 새로운 사양의 완전히 새로운 제안으로서 이는

수년

까지 구현되지 않을 수도 있습니다. tr

그동안 스크립트를 사용하여 요소를 필터링하고 그에 따라 스타일이나 추가 클래스 이름을 적용해야 합니다. 예를 들어, 다음은 jQuery를 사용하는 일반적인 해결 방법입니다(테이블에

요소가 포함된 행 그룹이 하나만 있다고 가정).

으아악

에 해당하는 CSS는 다음과 같습니다.

으아악

Selenium과 같은 자동화된 테스트 도구를 사용하거나 BeautifulSoup과 같은 도구를 사용하여 HTML을 구문 분석하는 경우 이러한 도구 중 다수를 통해 XPath를 대안으로 사용할 수 있습니다.

으아악 🎜다양한 기술을 사용하는 다른 솔루션은 독자의 연습 문제로 남겨두겠습니다. 이는 단지 간략하고 의도적인 예일 뿐입니다. 🎜

---

¹ _{유형 또는 범용 선택기가 지정된 경우 먼저 와야 합니다. 그러나 이는 선택기의 기본 작동을 변경하지 않으며 단지 구문상의 문제일 뿐입니다.}

² _{은 원래 :nth-match()，然而，因为它仍然只计算相对于其同级元素，而不是与满足给定选择器的每个其他元素，所以自2014年以来，它已被重新用作现有的:nth-child()의 확장으로 제안되었습니다.}