특정 Div 내에서 CSS 스타일의 상속을 방지하는 방법은 무엇입니까?

공개 CSS 스타일에서 div 분리

문제:

제공된 HTML 코드에서 CSS 스타일이 다음에 적용되었습니다. img 및 h1 요소는 #mydiv div 내의 요소에도 영향을 미칩니다. 이러한 상속을 어떻게 방지할 수 있습니까?

해결책:

all 단축 속성 사용:

CSS 레벨 3에서는 all 약식 속성 - 요소의 모든 속성을 재설정할 수 있습니다. #mydiv div에 all:initial을 설정하면 상위 항목에서 상속된 모든 스타일이 차단됩니다.

#mydiv div 내에서 스타일 지정을 허용하려면 해당 하위 항목에 all: unset을 적용하세요. 이렇게 하면 외부 CSS가 영향을 미치지 않도록 하면서 div 내에서 상속이 활성화됩니다.

<code class="css">#mydiv {
  all: initial;
}
#mydiv * {
  all: unset;
}</code>

개별 속성 수동 설정:

더 폭넓은 브라우저 지원을 위해 알려진 모든 속성을 수동으로 설정하세요. #mydiv div의 이니셜과 해당하는 경우 해당 하위 항목의 이니셜을 상속하는 CSS 속성입니다. 이는 all 속성의 동작을 시뮬레이션합니다.

추가 고려 사항:

• 더욱 구체적인 제어를 위해 ID 대신 div에 클래스를 사용하는 것이 좋습니다.
• 완전한 격리를 보장하기 위해 잠재적인 의사 요소 자손의 스타일을 차단합니다.
• 아직 보편적으로 지원되지 않으므로 all 단축 속성에 대한 브라우저 지원을 모니터링하세요.

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