CSS 선택기: 지정된 클래스의 첫 번째 요소를 가져옵니다.

Question

클래스 이름이 있는 첫 번째 요소가 많이 있습니다. red 的元素，但我似乎无法使用以下 CSS 规则选择带有 class="red":

으아악 으아악

이 선택기의 문제점은 무엇이며 red 수업의 첫 번째 어린이를 대상으로 하려면 어떻게 수정해야 합니까?

Answer 1

:first-child 선택기의 목적은 이름에서 알 수 있듯이 상위 태그의 첫 번째 하위 태그를 선택하는 것입니다. 따라서 이 예는 작동합니다(여기서 여기에서 시도해 보세요): 으아악

그러나 태그가 다른 상위 태그 아래에 중첩되어 있거나 red 클래스 태그가 상위 태그 아래의 첫 번째 태그가 아닌 경우에는 이 방법이 작동하지 않습니다.

또한 이는 전체 문서의 첫 번째 태그에만 적용되는 것이 아니라 이를 둘러싼 새로운 상위 태그가 있을 때마다 적용됩니다. 예:

으아악

first 和 third 빨간색이 됩니다.

귀하의 경우에는 :nth-of-type 선택기를 사용할 수 있습니다:

으아악 으아악

이 방법이 포함된 답변을 삭제한 Martyn에게 감사드립니다.

:nth-child() 和 :nth-of-type()에 대한 자세한 내용을 보려면 http://www.quirksmode.org/css/nthchild.html을 방문하세요.

CSS3 선택기이므로 현재 오래된 일부 브라우저 버전(예: IE8 이하)이 예상대로 작동하지 않을 수 있습니다. 자세한 내용은 https://caniuse.com/?search=nth-of-type을 방문하세요.

Answer 2

이것은 :first-child 如何工作的最著名的例子之一。 CSS2中引入，:first-child의사 클래스가 부모의 첫 자녀를 나타낸다는 저자의 오해입니다. 그게 다야. 나머지 복합 선택기가 지정한 기준과 일치하는 첫 번째 하위 요소를 선택한다는 매우 일반적인 오해가 있습니다. 선택기가 작동하는 방식으로 인해(설명은 여기 참조) 이는 사실이 아닙니다.

선택기 레벨 3에는 요소 유형의 형제 요소 중 첫 번째 요소를 나타내는 :first-of-type 의사 클래스:first-of- type 伪类，表示其元素类型的兄弟元素中的第一个元素。 这个答案图文并茂地解释了 :first-child 和 :first-of-type 之间的区别。但是，与 :first-child 一样，它不会查看任何其他条件或属性。在 HTML 中，元素类型由标签名称表示。在问题中，该类型是 p가 도입되었습니다. 이 답변은 그림으로 설명되어 있습니다. 및 텍스트 :first-child와 :first-of-type의 차이점입니다. 그러나 :first-child와 마찬가지로 다른 조건이나 속성은 확인하지 않습니다. HTML에서 요소 유형은 태그 이름으로 표시됩니다. 질문에서 유형은 p입니다.

안타깝게도 특정 클래스의 첫 번째 하위 요소와 일치하는 유사한 :first-of-class 의사 클래스가 없습니다. 이 답변이 처음 게시되었을 때 새롭게 출시된 FPWD 선택기 레벨 4에서는 기존 선택기 메커니즘을 중심으로 설계된 :nth-match() 의사 클래스 :first-of-class 伪类来匹配给定类的第一个子元素。在首次发布此答案时，新发布的 FPWD选择器级别 4 引入了 :nth-match() 伪类，它是围绕现有选择器机制设计的，正如我在第一段中提到的，通过添加选择器列表参数，您可以通过它提供其余的选择器复合选择器以获得所需的过滤行为。近年来，此功能纳入 :nth-child( ) 本身，选择器列表作为可选的第二个参数出现，以简化事情并避免 :nth-match()는 첫 번째 단락에서 언급한 것처럼 선택기 목록 매개변수를 추가하여 다음을 제공할 수 있습니다. 원하는 필터링 동작을 얻기 위해 나머지 선택기 화합물 선택기를 사용합니다. 최근 몇 년 동안 이 기능은 에 통합되었습니다. nth-child( ) 자체

에서 선택기 목록은 작업을 단순화하고 :nth-match()가 전체 문서에서 일치한다는 잘못된 인상을 피하기 위해 선택적 두 번째 인수로 나타납니다(참조 아래 마지막 참고) .

우리가 크로스 브라우저 지원을 기다리는 동안(거의 10년이 지났고 지난 5년 동안 구현은 단 한 번뿐이었습니다) 해결 방법은 다음과 같습니다. Lea Verou와 저는 독립적으로 개발했습니다. (그녀가 가장 먼저 해야 할 일은! )는 먼저 해당 클래스의 모든 요소에 원하는 스타일을 적용하는 것입니다.

으아아아

...그런 다음 규칙에서 일반 형제 조합자를 재정의합니다. ~:

으아아아

이제 class="red"가 있는 첫 번째 요소에만 테두리가 생깁니다.

다음은 규칙을 적용하는 방법에 대한 지침입니다.

으아아아 으아아아