부모 CSS 스타일을 무시하는 방법
부모 스타일을 무시하고 기본 스타일 (없음)을 사용하는 방법이 궁금합니다. 구체적인 사례를 예로 보여 드리지만 일반적인 질문이라고 확신합니다.
<style>
#elementId select {
height:1em;
}
</style>
<div id="elementId">
<select name="funTimes" style="" size="5">
<option value="test1">fish</option>
<option value="test2">eat</option>
<option value="test3">cows</option>
</select>
</div>
이 문제를 해결하고 싶지 않은 방법 :
- "#elementId select"가 최고 스타일 시트를 편집 할 수 없습니다. 내 모듈은 이에 액세스 할 수 없습니다.
- 스타일 속성을 사용하여 높이 스타일을 재정의하지 않는 것이 좋습니다.
예를 들어 방화범을 사용하면 부모 스타일을 끌 수 있으며 모든 것이 정상입니다. 이것이 제가 원하는 효과입니다.
스타일이 설정 완화 할 수 있습니까? 아니면 재정의해야할까요?
재정의해야합니다. 다음을 사용할 수 있습니다.
<!-- Add a class name to override -->
<select name="funTimes" class="funTimes" size="5">
#elementId select.funTimes {
/* Override styles here */
}
!importantCSS 스타일에서 플래그를 사용하는지 확인하십시오. 예를 들어 margin-top: 0px !important CSS에서! 중요한는 무엇을 의미합니까?
속성 선택기를 사용할 수 있습니다 레거시 브라우저 (IE6 읽기 등)에서 지원되지 않는 클래스 이름을 추가하는 것이 좋습니다.
다음과 같이 재정렬 할 수 있습니다.
높이 : 자동! 중요한;
추천합니다
높이 : 자동! 중요한;
기본적으로 초기 규칙을 뒤집는 CSS 스타일 시트 아래에 다른 정의를 만들 수 있습니다. 또한 해당 규칙에 "! 중요"를 추가하여 적용 할 수 있습니다.
Joomla 웹 사이트에서 작업하는 동안 상황이 발생했습니다.
영향을받을 모듈에 클래스 이름을 추가했습니다. 귀하의 경우 :
<select name="funTimes" class="classname">
그런 다음 CSS에서 다음 한 줄을 변경했습니다. 라인 추가
#elementId div.classname {style to be applied !important;}
잘 했어요!
qeustion을 알고 이해 width:auto다음 과 같이 CSS에서 "auto"를 사용할 수 있으며 기본 설정으로 돌아갑니다.
이 편집으로 인해 정상에 올랐습니다 ... 답변은 약간 부실 해졌고 표준에 다른 솔루션이 추가 된 큼 유용하지.
이제 "모든"속기 속성이 있습니다.
#elementId select.funTimes {
all: initial;
}
이 설정 초기 값으로 CSS 속성은 ... 주의 초기 값의 일부는 상속이다; 결과적으로 일부 서식이 요소에서 여전히 발생합니다.
나중에 코드를 읽거나 검토 할 때 일시 중지가 필요하다고 검토 프로세스가 오류 / 버그가 있습니다. 페이지를 편집 할 때. 그러나 모두 있어야 할 속성이 많은 경우 "모두"가 갈 길입니다.
표준은 여기에서 온라인입니다 : https://drafts.csswg.org/css-cascade/#all-shorthand
CSS가 다음과 같이 단순히 추가 스타일 (예 : 페이지의 헤드 섹션에)을 추가하는 방법을 갖는 것이 합리적입니다.
<head>
<style>
#elementId select {
/* turn all styles off (no way to do this) */
}
</style>
</head>
이전에 적용된 모든 스타일을 끄지 만 이렇게 할 수있는 방법은 없습니다 . height 속성을 재정의하고 페이지의 헤드 섹션에서 새 값으로 설정해야합니다.
<head>
<style>
#elementId select {
height:1.5em;
}
</style>
</head>
부모 컨테이너 (일반적으로 프레임 워크 구성 요소) CSS 스타일을 재정의하고 사용자 지정 스타일을 강제하기 위해 CSS 클래스를 다시 요소에 다시 적용하려면 아래의 typescript를 참조하십시오. 앱 프레임 워크 (각도 / 반응, 부모 컨테이너 CSS가 다시 적용되고 css-class-name의 예상 효과가 자식 요소에 표시되지 않도록이 작업을 수행 할 수 있습니다. this.overrideParentCssRule (childElement, ') css-class-name '); 프레임 워크가 방금 한 작업을 수행하려면 (document.ready 또는 이벤트 핸들러의 끝에서 호출) :
overrideParentCssRule(elem: HTMLElement, className: string) {
let cssRules = this.getCSSStyle(className);
for (let r: number = 0; r < cssRules.length; r++) {
let rule: CSSStyleRule = cssRules[r];
Object.keys(rule.style).forEach(s => {
if (isNaN(Number(s)) && rule.style[s]) {
elem.style[s] = rule.style[s];
}
});
}
}
- Mike Zheng tradrejoe@gmail.com
참고 URL : https://stackoverflow.com/questions/946645/how-to-ignore-parent-css-style
'ProgramingTip' 카테고리의 다른 글
| 한 단위가 hashCode-equals 계약을 어떻게 테스트해야합니까? (0) | 2020.10.27 |
|---|---|
| iOS 7 iPad Safari Landscape innerHeight / outerHeight 레이아웃 문제 (0) | 2020.10.27 |
| MSSQL GetDate ()를 사용할 때 날짜 만 가져 오려면 어떻게해야합니까? (0) | 2020.10.27 |
| Android 웹 페이지에서 입력 확대 / 축소 (0) | 2020.10.27 |
| TeamCity로 빌드 한 후 배포하는 방법은 무엇입니까? (0) | 2020.10.27 |