HTML의 공개 CSS 스타일에서 div를 어떻게 분리할 수 있나요?

공개 CSS 스타일에서 div 분리

HTML에서 CSS 계단식 배열 및 상속은 때때로 의도하지 않은 div 내의 요소에 영향을 줄 수 있습니다. 공개 CSS 규칙에 따라 스타일이 지정됩니다. 이로 인해 예기치 않은 형식 문제가 발생할 수 있습니다. 이 문제를 해결하기 위해 CSS Cascading and Inheritance Level 3에서는 all 단축 속성과 unset 키워드를 도입했습니다.

all 및 unset 키워드 사용

div 내부의 태그를 방지하려면 공개 스타일의 영향을 받지 않도록 div에 all:initial을 설정하고 해당 하위 항목에 all: unset을 설정할 수 있습니다. 이렇게 하면 div의 모든 속성에 대한 상속이 차단되고 div 자체 내에서 상속이 허용됩니다.

예

다음 HTML을 고려하세요.

<code class="html"><div id='mydiv'>
  <img src='an image source' />
  <h1>Hi it's test</h1>
</div></code>

다음 CSS는 다음과 같습니다.

<code class="css">img {
  width:100px;
  height:100px;
}
h1 {
  font-size:26px;
  color:red;
}</code>

div를 분리하지 않으면 div 내부의 이미지와 제목이 공개 스타일을 상속합니다. 이를 분리하려면 다음 CSS를 적용하세요.

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

이렇게 하면 공개 스타일이 #mydiv div 내의 요소에 영향을 주지 않도록 차단하고 div 자체에 정의된 스타일을 상속할 수 있습니다.

크로스 브라우저 지원

all 속성은 대부분의 최신 브라우저에서 지원됩니다. 이전 브라우저의 경우 유사한 결과를 얻기 위해 모든 CSS 속성에 대해 초기를 수동으로 지정할 수 있습니다. 하지만 이 방법은 all 속성을 사용하는 것보다 효율성이 떨어집니다.

위 내용은 HTML의 공개 CSS 스타일에서 div를 어떻게 분리할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!