공개 CSS 스타일에서 `div` 컨테이너를 분리하고 해당 하위 항목이 전역 스타일을 상속받지 못하도록 하려면 어떻게 해야 합니까?

Linda Hamilton

풀어 주다： 2024-10-26 04:19:03

원래의

395명이 탐색했습니다.

How can you isolate a `div` container from public CSS styles and prevent its children from inheriting global styles?

공개 CSS 스타일에서 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>

로그인 후 복사

질문이 생깁니다. 모든 그리고

태그가 #mydiv 컨테이너 내의 요소에 영향을 미치지 않도록 합니까?

해결책

#mydiv 내의 요소를 전역 CSS 스타일에서 분리하려면 다음에서 도입된 all 단축 속성과 unset 키워드를 활용할 수 있습니다. CSS 계단식 및 상속 수준 3.

#mydiv에 all:initial을 설정하면 모든 속성에 대한 상속이 차단되고 기본값으로 재설정됩니다. 이렇게 하면 전역 스타일이 컨테이너에 계단식으로 적용되는 것을 방지할 수 있습니다.

#mydiv 내에서 상속을 허용하려면 해당 하위 항목에 대해 all: unset을 설정할 수 있습니다. 이렇게 하면 컨테이너 내에 정의된 규칙이 외부 스타일의 간섭 없이 적용될 수 있습니다.

수정된 CSS 코드는 다음과 같습니다.

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

로그인 후 복사

이 기술에 유의하는 것이 중요합니다. 공급업체 접두사 속성을 포함하여 가능한 모든 CSS 속성에 적용됩니다. 광범위한 브라우저 지원을 보장하려면 의사 요소도 대상으로 지정하는 것이 좋습니다.

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

로그인 후 복사

대체 접근 방식

또는 더 넓은 브라우저 호환성을 위해 수동으로 각 CSS 속성을 초기 값으로 설정할 수 있습니다. 다음 코드에서 볼 수 있듯이 #mydiv에 값을 지정하고 해당 하위 항목에서 상속합니다.

<code class="css">#mydiv {
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...

  color: inherit;
  ...
}

#mydiv::before,
#mydiv::after,
#mydiv *,
#mydiv *::before,
#mydiv *::after {
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...

  color: inherit;
  ...
}</code>

로그인 후 복사