집

웹 프론트엔드

CSS 튜토리얼

왜 `:first-child`는 ``에서 첫 번째 ``를 선택하지 않습니까?

Mary-Kate Olsen

Dec 14, 2024 am 05:27 AM

Why Doesn't `:first-child` Select the First `` in a ``?

CSS 선택자의 잘못된 해석

첫 번째

내의 요소 클래스 이름이 Detail_container인 경우 예상치 못한 결과가 발생할 수 있습니다. 이 문제는 :first-child 선택기의 작동 방식에 대한 오해로 인해 발생합니다.

구현한 CSS가 첫 번째

Detail_container

의 첫 번째 하위 요소이기도 합니다. 그러나 이

가

이 첫 번째

인 경우에도 일치하지 않습니다.

올바른 CSS 선택기 사용법

첫 번째

요소의 경우, Detail_container

내의 위치에 관계없이 대신 :first-of-type 선택기를 사용해야 합니다. 이 선택기는 첫 번째

지정된 상위 요소의 직계 하위 요소입니다.

.detail_container h1:first-of-type {
  color: blue;
}

로그인 후 복사

또는 브라우저 호환성을 높이기 위해 클래스를 첫 번째

CSS에서 해당 클래스를 타겟팅합니다.

.detail_container h1.first {
  color: blue;
}

로그인 후 복사

CSS 선택기의 미묘한 차이를 이해하면 스타일 규칙이 원하는 요소를 정확하게 타겟팅할 수 있습니다.

위 내용은 왜 `:first-child`는 ``에서 첫 번째 ``를 선택하지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

자바 튜토리얼

1662

Cakephp 튜토리얼

1419

라라벨 튜토리얼

1312

PHP 튜토리얼

1262

C# 튜토리얼

1235

Related knowledge

Google 글꼴 변수 글꼴 Apr 09, 2025 am 10:42 AM

Google Fonts가 새로운 디자인 (트윗)을 출시 한 것을 볼 수 있습니다. 마지막 큰 재 설계와 비교할 때 이것은 훨씬 더 반복적 인 느낌이 듭니다. 차이를 간신히 말할 수 있습니다

HTML, CSS 및 JavaScript로 애니메이션 카운트 다운 타이머를 만드는 방법 Apr 11, 2025 am 11:29 AM

프로젝트에 카운트 다운 타이머가 필요한 적이 있습니까? 그런 것은 플러그인에 도달하는 것이 당연하지만 실제로는 훨씬 더 많습니다.

HTML 데이터 속성 안내서 Apr 11, 2025 am 11:50 AM

HTML, CSS 및 JavaScript의 데이터 속성에 대해 알고 싶었던 모든 것.

SVG에서 타탄 패턴을 생성하는 정적 사이트를 만드는 방법 Apr 09, 2025 am 11:29 AM

타탄은 일반적으로 스코틀랜드, 특히 세련된 킬트와 관련된 패턴의 천입니다. tartanify.com에서 우리는 5,000 개가 넘는 타탄을 모았습니다

Sass를 더 빨리 만들기위한 개념 증명 Apr 16, 2025 am 10:38 AM

새로운 프로젝트가 시작될 때, Sass 컴파일은 눈을 깜박이게합니다. 특히 BrowserSync와 짝을 이루는 경우 기분이 좋습니다.

PHP는 템플릿을위한 A-OK입니다 Apr 11, 2025 am 11:04 AM

PHP 템플릿은 종종 서브 파 코드를 용이하게하는 데 나쁜 랩을 얻지 만, 그렇지 않아야합니다. PHP 프로젝트가 기본을 시행 할 수있는 방법을 살펴 보겠습니다.

WordPress 테마에서 VUE 구성 요소를 빌드하는 방법 Apr 11, 2025 am 11:03 AM

Inline-Template 지시문을 사용하면 기존 WordPress 마크 업에 대한 진보적 인 향상으로 풍부한 VUE 구성 요소를 구축 할 수 있습니다.

접근 가능한 색상 조합을 생성하기 위해 SASS를 프로그래밍합니다 Apr 09, 2025 am 11:30 AM

우리는 항상 웹에 더 액세스 할 수 있도록하고 있습니다. 색상 대비는 수학 일 뿐이므로 Sass는 디자이너가 놓친 에지 케이스를 다룰 수 있습니다.

See all articles

왜 `:first-child`는 ``에서 첫 번째 ``를 선택하지 않습니까?

이 첫 번째

인 경우에도 일치하지 않습니다.

올바른 CSS 선택기 사용법

첫 번째

지정된 상위 요소의 직계 하위 요소입니다.

.detail_container h1:first-of-type { color: blue; }
로그인 후 복사

또는 브라우저 호환성을 높이기 위해 클래스를 첫 번째