자식 요소가 부모 스타일을 상속하지 못하도록하는 CSS
중복 가능성 :
CSS 상속을 어떻게 방지합니까?
요소의 CSS 속성을 선언하여 자식에 영향을주지 않거나 지정된 스타일 만 구현하고 부모에 대해 선언 된 스타일을 상속하지 않도록 요소의 CSS를 선언하는 방법이 있습니까? ?
간단한 예
HTML :
<body>
<div id='container'>
<form>
<div class='sub'>
Content of the paragraph
<div class='content'>Content of the span</div>
</div>
</form>
</div>
</body>
CSS :
form div {
font-size: 12px;
font-weight: bold;
}
div.content {
/* Can anything go here? */
}
정상적인 상황에서는 텍스트 블록 "문단 내용"및 "범위 내용"이 모두 12px이고 굵게 표시 될 것으로 예상합니다.
"#container form div"블록의 선언을 상속하지 못하게하는 "div.content"블록의 위 CSS에 포함하여 스타일을 "단락의 내용"및 예비 "로 제한하는 속성이 있습니까? 다른 하위 div를 포함한 범위의 콘텐츠 "
왜 그런지 궁금하다면 프로젝트의 모든 양식에 특정 느낌을주고 양식 아래의 div가 모두 느낌을 상속하는 특정 CSS 파일을 만들었습니다. 문제 없어요. 그러나 양식 내부에서는 Flexigrid를 사용하고 싶지만 flexigrid는 스타일을 상속하며 쓸모 없게 보입니다. 양식 외부에서 flexigrid를 사용하고 양식 css를 상속하지 않으면 멋지게 보입니다. 그렇지 않으면 끔찍해 보입니다.
불행히도 여기서 운이 좋지 않습니다.
이 inherit자식에 대한 부모로부터 특정 값을 복사 할 수 있지만, 다른 방법으로 라운드 (다른 선택을 포함 할 결정 할 재산이없는 이는 되돌릴 스타일).
스타일 변경 사항을 수동으로 되돌려 야합니다.
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 작업 그룹은 무엇인가에 달려 있습니다 .
div.content {
all: revert;
}
이것이 브라우저에 의해 언제 또는 언제 구현 될지 알 수 없습니다.
편집 2 : 2015 년 3 월 현재 Safari 및 IE / Edge를 제외한 모든 최신 브라우저에서 구현했습니다 : https://twitter.com/LeaVerou/status/577390241763467264 (감사합니다, @Lea Verou !)
편집 3 : default 이름이 revert.
Can't you style the forms themselves? Then, style the divs accordingly.
form
{
/* styles */
}
You can always overrule inherited styles by making it important:
form
{
/* styles */ !important
}
CSS rules are inherited by default - hence the "cascading" name. To get what you want you need to use !important:
form div
{
font-size: 12px;
font-weight: bold;
}
div.content
{
// any rule you want here, followed by !important
}
'Development Tip' 카테고리의 다른 글
| XmlNamespaceManager가 필요한 이유는 무엇입니까? (0) | 2020.11.15 |
|---|---|
| Laravel 5에서 모듈 식 앱을 구성하는 방법은 무엇입니까? (0) | 2020.11.15 |
| Imagemagick을 사용하여 GIF, PNG 및 JPG를 .ICO 파일로 변환 (0) | 2020.11.15 |
| Android Studio 및 Gradle 빌드 오류 (0) | 2020.11.15 |
| 기본 메서드는 잠시 동안 true를 반환 한 다음 false를 반환합니까? (0) | 2020.11.15 |