CSS에서 하위 요소 상속을 방지하는 방법은 무엇입니까?

CSS에서 하위 요소 상속 방지

CSS 영역에서 상속은 상위 요소의 스타일을 기반으로 하위 요소의 스타일을 정의하는 데 중요한 역할을 합니다. 그러나 이 상속을 재정의하고 하위 요소의 스타일을 독립적으로 사용자 정의하려는 상황이 있을 수 있습니다.

상속 문제

다음 HTML 구조를 고려하세요.

<div>

이 CSS를 사용하면:

form div {font-size: 12px; font-weight: bold;}

일반적으로 텍스트 블록은 "문단의 내용"과 "범위의 내용"은 상위 양식에서 글꼴 크기와 두께를 상속합니다.

상속 방지

수동 스타일 복귀:

한 가지 방법 상속을 재정의하려면 자식의 스타일 변경 사항을 수동으로 되돌리는 것이 필요합니다. 요소:

div {color: green;}

form div {color: red;}

form div div.content {color: green;}

여러 클래스 추가:

마크업을 제어할 수 있는 경우 특정 요소를 대상으로 하는 추가 클래스를 추가할 수 있습니다.

form div.sub {color: red;}

form div div.content {/* Remains green */}

미래 솔루션: 되돌리기 속성

CSS 작업 그룹은 현재 되돌리기를 탐색하고 있습니다. 속성:

div.content {
  all: revert;
}

이 속성을 사용하면 하위 요소에서 상속된 모든 스타일을 명시적으로 재설정할 수 있습니다. 2023년 4월 현재 대부분의 최신 브라우저(Safari 및 Internet Explorer/Edge 제외)는 되돌리기 속성을 지원합니다.

위 내용은 CSS에서 하위 요소 상속을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!