부모 CSS 스타일을 무시하는 방법

Question 1

부모 스타일을 무시하고 기본 스타일 (없음)을 사용하는 방법이 궁금합니다. 구체적인 사례를 예로 보여 드리지만 이것이 일반적인 질문이라고 확신합니다.

<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"가 설정된 스타일 시트를 편집 할 수 없습니다. 내 모듈에서 액세스 할 수 없습니다.
스타일 속성을 사용하여 높이 스타일을 재정의하지 않는 것이 좋습니다.

예를 들어 방화범을 사용하면 부모 스타일을 끌 수 있으며 모든 것이 정상입니다. 이것이 제가 원하는 효과입니다.

스타일이 설정되면 비활성화 할 수 있습니까, 아니면 재정의해야합니까?

Question 2

재정의해야합니다. 다음을 사용할 수 있습니다.

<!-- 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에서! important는 무엇을 의미합니까?

속성 선택기를 사용할 수 있지만 레거시 브라우저 (IE6 읽기 등)에서 지원되지 않으므로 클래스 이름을 추가하는 것이 좋습니다.

Question 3

다음과 같이 재정 의하여 끌 수 있습니다.

높이 : 자동! 중요한;

Question 4

이것은 편집으로 인해 정상에 올랐습니다 ... 답변은 약간 부실 해졌고 오늘날 표준에 다른 솔루션이 추가 된 것만 큼 유용하지 않습니다.

이제 "모든"속기 속성이 있습니다.

#elementId select.funTimes {
   all: initial;
}

이 설정 초기 값으로 모든 CSS 속성은 ... 주의 초기 값의 일부는 상속이다; 요소에서 일부 서식이 여전히 발생합니다.

나중에 코드를 읽거나 검토 할 때 일시 중지가 필요하므로 검토 프로세스가 오류 / 버그가 발생할 수있는 지점이므로 가장 많이 사용하지 않는 한 사용하지 마십시오! 페이지를 편집 할 때. 그러나 재설정해야 할 속성이 많은 경우 "모두"가 갈 길입니다.

Standard는 여기에서 온라인입니다 : https://drafts.csswg.org/css-cascade/#all-shorthand

Question 5

기본적으로 초기 규칙을 뒤집는 CSS 스타일 시트에 다른 정의를 만들 수 있습니다. 또한 "! important"를 해당 규칙에 추가하여 고정되도록 할 수 있습니다.

Question 6

이것을 사용해야합니다

높이 : 자동! 중요한;

Question 7

Joomla 웹 사이트에서 작업하는 동안 비슷한 상황이 발생했습니다.

영향을받을 모듈에 클래스 이름을 추가했습니다. 귀하의 경우 :

<select name="funTimes" class="classname">

그런 다음 CSS에서 다음 한 줄을 변경했습니다. 라인 추가

#elementId div.classname {style to be applied !important;}

잘 했어요!

Question 8

내가 제대로 질문을 이해하는 경우 : 당신이 사용할 수있는 auto에서 CSS이 같은 width: auto;그것은 기본 설정으로 되돌아 갈 것입니다.

Question 9

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>

Question 10

부모 컨테이너 (일반적으로 프레임 워크 구성 요소) 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

Question 11

CSS 규칙을 실행 취소하는 데 사용할 수있는 값은 초기, 설정 해제 및 되돌리기입니다. W3C의 CSS 워킹 그룹의 자세한 내용 :

https://drafts.csswg.org/css-cascade/#defaulting-keywords

이것이 '초안'이기 때문에 모든 것이 완전히 지원되는 것은 아니지만 대부분의 주요 브라우저에서 설정되지 않은 초기 값이 지원되므로 되돌리기는 지원이 적습니다.