CSS 스타일이 상위 요소에서 상속되는 것을 방지할 수 있나요?

CSS에서 하위 요소가 상위 스타일을 상속받지 못하도록 방지

문제:

상위 요소에 선언된 CSS 속성이 하위 요소에 상속되는 것을 방지하는 방법은 무엇입니까? 예를 들어, 상위 요소의 글꼴 크기가 12px인 경우 하위 요소가 이 스타일을 상속하지 못하도록 할 수 있습니까?

답변:

안타깝게도 상위 요소로부터의 상속을 방지할 수 있는 간단한 CSS 속성이 없습니다. 그러나 구현할 수 있는 몇 가지 해결 방법이 있습니다.

1. 스타일 변경 사항을 수동으로 되돌리기:

   상속된 스타일을 명시적으로 설정하여 재정의할 수 있습니다. 하위 요소에 원하는 스타일. 예:

   div { color: green; }
   
   form div { color: red; }
   
   form div div.content { color: green; }

2. 마크업에 여러 클래스 추가:

   HTML 마크업에 액세스할 수 있는 경우 여러 클래스를 추가할 수 있습니다. 특정 스타일을 대상으로 하는 요소에 클래스를 추가합니다. 이를 통해 상속된 클래스의 스타일을 재정의할 수 있습니다.

   form div.sub { color: red; }
   
   form div div.content { /* remains green */ }

3. all: revert 속성 사용(실험용):

   CSS 작업 그룹 요소의 모든 스타일을 초기 값으로 재설정하는 all: revert 속성을 제안했습니다. 이는 상위 요소로부터의 상속을 방지하는 데 사용할 수 있습니다.

   div.content {
     all: revert;
   }

   이 속성은 아직 실험적이며 모든 브라우저에서 지원되지 않을 수 있습니다.

위 내용은 CSS 스타일이 상위 요소에서 상속되는 것을 방지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!