전역 CSS 영향으로부터 Div를 분리하는 방법: `all:initial` 및 `all: unset` 사용

글로벌 CSS 영향으로부터 Div를 격리하는 방법

제공된 HTML 코드에는 본문 내에 ID가 "mydiv"인 div 요소가 중첩되어 있습니다. 이미지 및 제목과 같은 요소에 CSS 스타일을 적용할 때 이러한 공개 스타일에서 "mydiv" 내의 요소를 제외할 수 있습니다.

CSS 계단식 배열 및 상속 제어

CSS 계단식 배열 및 상속 수준 3에는 all 단축 속성과 unset 키워드가 도입되어 상속을 제한하고 특정 요소를 격리할 수 있게 되었습니다. 요소에 all:initial을 설정하면 모든 상속을 효과적으로 차단하고 모든 속성을 초기 값으로 재설정할 수 있습니다. 이는 상위 요소에서 상속된 모든 스타일을 무시하고 깨끗한 상태로 시작하는 것과 유사합니다.

"mydiv"를 all:initial로 분리

상속된 스타일이 "mydiv" 내의 요소에 영향을 주지 않도록 하려면, div에 all:initial을 적용하고 하위 항목에 all: unset을 적용합니다.

<code class="css">#mydiv {
  all: initial; /* Blocks inheritance for all properties */
}

#mydiv * {
  all: unset; /* Allows inheritance within #mydiv */
}</code>

종합 속성 재설정

또는 다음을 보장합니다. 다양한 브라우저 간의 호환성을 위해 알려진 모든 CSS 속성(공급업체 접두사 버전 포함)을 수동으로 초기 값으로 설정할 수 있습니다.

<code class="css">#mydiv {
  /*
   * Using initial for all properties
   * to completely block inheritance
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...
  background: initial;
  ...
}

#mydiv::before,
#mydiv::after,
#mydiv *,
#mydiv *::before,
#mydiv *::after {
  /*
   * Using inherit for normally heritable properties,
   * and initial for the others, similar to unset
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...
  color: inherit;
  ...
}</code>

이러한 기술을 활용하여 "mydiv" 내의 요소가 상속되는 것을 성공적으로 방지할 수 있습니다. 전역 CSS 스타일의 영향을 받아 자체 캡슐화된 스타일 환경 내에서 격리됩니다.

위 내용은 전역 CSS 영향으로부터 Div를 분리하는 방법: `all:initial` 및 `all: unset` 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!