하위 요소가 상위 CSS 스타일을 상속받지 못하게 할 수 있나요?

하위 요소가 상위 CSS를 상속받지 못하도록 방지

원래 문의

다음에서 스타일 상속을 방지하도록 CSS를 수정할 수 있습니까? 부모 요소를 자식으로 요소?

종합적인 답변

안타깝게도 하위 요소가 상위 요소로부터 스타일을 상속받는 것을 방지할 수 있는 간단한 CSS 속성은 없습니다. 상속 속성을 사용하면 상위 요소에서 하위 요소로 값을 복사할 수 있지만 반대 방향에 해당하는 항목은 없습니다.

대체 솔루션

상속된 스타일을 재정의하려면, CSS 코드에서 수동으로 되돌려야 합니다.

div {
  color: green;
}

form div {
  color: red;
}

form div div.content {
  color: green;
}

또는 마크업을 제어할 수 있는 경우 추가 클래스를 사용하여 특정 요소를 대상으로 할 수 있습니다:

form div.sub {
  color: red;
}

form div div.content {
  /* remains green */
}

미래 가능성

CSS 작업 그룹에서는 이 문제에 대한 해결책을 모색하고 있습니다. 제안된 속성인 revert를 사용하면 상속된 스타일을 재설정하고 요소 자체의 계산된 스타일로 되돌릴 수 있습니다.

div.content {
  all: revert;
}

2015년 3월 현재 이 속성은 Safari 및 IE/를 제외한 모든 주요 브라우저에서 구현되었습니다. 가장자리. 하지만 이후 속성 이름은 되돌리기 위해 변경되었습니다.

위 내용은 하위 요소가 상위 CSS 스타일을 상속받지 못하게 할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!