공개 CSS 스타일이 Div 콘텐츠에 영향을 주지 않도록 하는 방법: \'all:initial\'은 어떻게 작동하나요?

공개 CSS 스타일이 Div 콘텐츠에 영향을 주지 않도록 방지하는 방법

HTML 코드에서 div 태그는 일반적으로 스타일 지정을 위해 요소를 그룹화하는 데 사용됩니다. 그러나 공개 CSS 스타일시트에 적용된 스타일에서 div 태그 내의 콘텐츠를 분리해야 하는 경우가 있습니다.

CSS 상속 및 계단식

CSS 스타일은 상속됩니다. 상위 요소의 하위 요소로. 즉, 이미지와 제목 태그가 모두 div 태그 안에 있는 경우 특별한 경우를 제외하고는 div 태그에 적용된 CSS 속성을 상속합니다.

'all:initial'을 사용한 상속 차단 '

div 태그 내의 콘텐츠가 공개 CSS 스타일의 영향을 받지 않도록 하려면 CSS 속성 'all:initial'을 사용하면 됩니다. 이 속성은 상속되고 정의된 모든 CSS 속성을 초기 값으로 재설정합니다.

코드 예

주어진 HTML 코드에서 div 콘텐츠를 분리하려면 다음 CSS를 사용할 수 있습니다. Used:

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

Div 태그 내 상속 허용

'all:initial'은 상속을 차단하지만 div 태그 자체 내에서는 허용하는 것이 가능합니다. 이렇게 하려면 div 태그의 하위 요소에 'all: unset' 속성을 사용할 수 있습니다.

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

브라우저 지원

'all' 속기 속성은 Chrome, Firefox, Safari 및 Edge를 포함한 최신 브라우저에서 널리 지원됩니다. 더 광범위한 지원을 위해 모든 CSS 속성을 초기 값으로 설정하는 더 긴 버전을 사용할 수 있습니다.

<code class="css">#mydiv {
  /* ... (set all CSS properties to 'initial') ... */
}</code>

결론

'all:initial 상속을 차단하려면 ', div 내에서 상속을 허용하려면 'all: unset'을 사용하면 공개 CSS 스타일시트에서 div 태그의 콘텐츠를 분리할 수 있습니다. 이 기술은 독립형 위젯이나 구성 요소를 만드는 데 특히 유용합니다.

위 내용은 공개 CSS 스타일이 Div 콘텐츠에 영향을 주지 않도록 하는 방법: \'all:initial\'은 어떻게 작동하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!