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

CSS 상속 및 재정의

특정 상황에서는 하위 요소가 상위 요소에서 상속된 스타일을 상속받지 못하도록 해야 할 수도 있습니다. 이를 달성하기 위한 특정 CSS 속성은 없지만 스타일 변경 사항을 수동으로 되돌리거나 추가 클래스를 추가하여 보다 구체적인 스타일을 정의할 수 있습니다.

예를 들어 다음 HTML 및 CSS를 고려하세요.

HTML:

 <div>
<p>CSS:</p>
<pre class="brush:php;toolbar:false">form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

일반적인 상황에서는 텍스트 블록 "콘텐츠" "단락의" 및 "범위의 내용"은 상위 "양식 div" 요소에서 글꼴 크기와 두께를 상속하므로 두 텍스트가 모두 굵게 표시되고 12픽셀이 됩니다.

이러한 상속을 방지하고 스타일을 제한하려면 "단락의 내용"만 보려면 스타일 변경 사항을 수동으로 되돌릴 수 있습니다.

div { color: green; }

form div { color: red; }

form div div.content { color: green; }

또는 가능하다면 마크업에 추가 클래스를 추가하면 더 많은 것을 제공할 수 있습니다. 정확한 스타일 지정:

최신 버전의 최신 브라우저는 이제 특정 요소에 대한 상속을 명시적으로 되돌리는 "revert" 속성을 지원합니다.

div.content {
  all: revert;
}

이를 통해 더욱 간결하고 유연한 스타일 재정의가 가능합니다. .