오버라이드 방법!중요?

오버라이드 방법!중요?

워드프레스 템플릿의 원본 CSS를 덮어쓰는 사용자 정의 스타일 시트를 만들었습니다.그러나, 나의 달력 페이지에서, 원본 CSS는 각 테이블 셀의 높이를 가지고 있습니다.!important선언:

td {height: 100px !important}

제가 이걸 무시할 수 있는 방법이 있을까요?

!중요 수식어 재정의

1. 다음을 사용하여 다른 CSS 규칙을 추가합니다.!important그리고 셀렉터에 더 높은 구체성을 부여합니다(셀렉터에 추가 태그, ID 또는 클래스 추가).
2. 동일한 선택기를 가진 CSS 규칙을 기존 규칙보다 나중에 추가합니다(동점에서, 마지막으로 정의된 CSS 규칙이 승리함).

더 높은 특수성(첫 번째는 가장 높음/덮어쓰기, 세 번째는 가장 낮음)을 갖는 몇 가지 예:

table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

또는 기존 선택기 뒤에 동일한 선택기를 추가합니다.

td {height: 50px !important;}

고지 사항:

사용하는 것은 거의 절대 좋은 생각이 아닙니다.!important이것은 WordPress 템플릿을 만든 사람들의 잘못된 엔지니어링입니다.바이럴 방식으로 템플릿 사용자가 자신의 데이터를 추가하도록 강제합니다.!important수정자를 사용하여 재정의하고 JavaScript를 통해 재정의하는 옵션을 제한합니다.

그러나 가끔은 오버라이드해야 하는 경우가 있을 경우 오버라이드 방법을 아는 것이 유용합니다.

에서 설정한 스타일을 재정의하는 것 외에style특성입니다. 스타일 시트에 특수성이 충돌하는 선택기가 있는 경우에만 사용해야 합니다.

그러나 특수성이 충돌하는 경우에도 예외에 대해 보다 구체적인 선택기를 만드는 것이 좋습니다.당신의 경우에는 그것을 갖는 것이 더 낫습니다.classHTML에서 더 구체적인 선택기를 만드는 데 사용할 수 있습니다.!important규칙.

td.a-semantic-class-name { height: 100px; }

개인적으로 절대 사용하지 않습니다.!important내 스타일시트에.CSS의 C는 캐스케이드용이라는 것을 기억하세요.사용.!important이것을 깰 것입니다.

스타일 이름의 모든 부분에는 가중치가 있으므로 해당 스타일과 관련된 요소가 많을수록 중요합니다.예를들면

#P1 .Page {height:100px;}

다음보다 더 중요합니다.

.Page {height:100px;}

따라서 중요한 것을 사용할 때는 정말로 필요한 경우에만 사용해야 합니다.선언을 재정의하려면 스타일을 보다 구체적으로 지정하고 재정의도 사용합니다.아래 참조:

td {width:100px !important;}
table tr td .override {width:150px !important;}

JavaScript를 사용하여 재정의

$('.mytable td').attr('style', 'display: none !important');

나를 위해 일했습니다.

이것도 도움이 될 수 있습니다.

td[style] {height: 50px !important;}

인라인 스타일을 재정의합니다.

셀렉터를 위로 이동하여 더 높은 특수성을 사용할 수 있습니다.

td {height: 100px !important}
/* higher precedence */
table td {height: 200px !important}

저는 여기서 CSS를 오버라이드하는 방법에 대한 자세한 기사를 작성했습니다.

이 질문이 처음 제기되었을 때는 이용할 수 없었던 몇 가지 현대적인 접근법이 있습니다.

1. 사용하다:is()입니다.

   :is(td, #A#A#A:not(*)) {height: 200px !important}

   목두선기에 있는 의 두 :is() 전체의 하지만 선택기의 특수성은 선 택 설 지 정 을 성 특 수 기:not(*)part는 선택기가 요소 자체와 일치하지 않음을 의미합니다.#A#A#A !할 수 (3,0,0)는 다음과 같습니다.중요 설정을 무시하기에 충분한 선택기를 안전하게 선택할 수 있습니다.하지만, 이것은 여전히 해킹입니다.

2. 더 나은 방법은 캐스케이드 레이어를 사용하는 것입니다.계층화!중요 선언은 비계층화!중요 선언을 재정의하므로 다음 작업을 수행할 수 있습니다.

   @layer { 
      td {height: 200px !important} 
   }
   

   명명된 도면층을 사용하면 이를 임의 수준으로 재정의할 수 있습니다.

두 접근 방식 모두 HTML 스타일 속성에서 !중요한 설정을 재정의할 수 없습니다.

어떤 경우에도, 당신은 당신이 그것을 무시할 수 있습니다.height와 함께max-height.

저는 정말 멋진 속임수를 발견했습니다: 아닙니다.위에서 도움이 되지 않는 경우 다음을 시도해 보십시오.

.page-width:not(.anything) {

}

만약 당신이 그것을 무시하려고 한다면.!important에 class을 만 하면 됩니다.id꼬리표를 달다id는 보우 순선높습다니가위보다 순위가 .class.

저는 위의 모든 것을 시도했지만 소용이 없었기 때문에 언급되지 않은 답변을 추가하고 싶습니다.나의 구체적인 상황은 내가 내장된 시맨틱-UI를 사용하고 있다는 것입니다.!important요소의 속성(매우 귀찮음).저는 그것을 무시하기 위해 모든 것을 시도했지만, 결국 한 가지만 성공했습니다(jquery 사용).다음과 같습니다.

$('.active').css('cssText', 'border-radius: 0px !important');

언급URL : https://stackoverflow.com/questions/11178673/how-to-override-important