중요를 무시하는 방법?

Wordpress 템플릿의 원래 CSS를 재정의하는 사용자 지정 스타일 시트를 만들었습니다. 그러나 내 캘린더 페이지에서 원래 CSS는 !important선언으로 설정된 각 테이블 셀의 높이를 갖습니다 .

td {height: 100px !important}

이것을 무시할 수있는 방법이 있습니까?

중요 수정 자 재정의

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

특이성이 더 높은 일부 예 (첫 번째는 가장 높거나 무시하고 세 번째는 가장 낮음)

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

또는 기존 선택기 뒤에 동일한 선택기를 추가하십시오.

td {height: 50px !important;}

부인 성명:

거의 사용하지 않는 것이 좋습니다 !important. 이것은 WordPress 템플릿을 만든 사람에게는 나쁜 엔지니어링입니다. 바이러스 방식으로 템플릿 사용자는 자신의 !important수정자를 추가하여 템플릿을 재정의하고 JavaScript를 통한 템플릿 재정의 옵션을 제한합니다.

그러나 때로는 재정의 하는 방법 을 아는 것이 유용 합니다.

은 !important당신이 충돌하여 스타일 시트에 선택기가있는 경우에만 사용해야합니다 특이성을 .

그러나 특성이 상충되는 경우에도 예외에 대해보다 구체적인 선택자를 작성하는 것이 좋습니다. 귀하의 경우 규칙이 class필요없는보다 구체적인 선택기를 만드는 데 사용할 수있는 HTML을 사용하는 것이 !important좋습니다.

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

나는 개인적 !important으로 내 스타일 시트에 사용하지 않습니다 . CSS의 C는 계단식입니다. 를 사용하면 문제 !important가 발생합니다.

면책 조항 : 모든 비용에 중요하지 마십시오!

이것은 더럽고 더러운 해킹이지만 중요를 무시하려는 속성에 (무한하게 반복되거나 매우 오래 지속되는) 애니메이션을 사용하여! important없이! important를 무시할 수 있습니다.

@keyframes forceYellow {
  from {
    background-color: yellow;
  }
  to {
    background-color: yellow;
  }
}

div {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background: red !important;
  animation: 1s linear infinite forceYellow;
}

<div></div>

여기 CSS 중요성에 대한 간단한 교훈이 있습니다. 아래가 도움이되기를 바랍니다!

먼저 스타일의 모든 부분이 가중치로 이름 지정되므로 해당 스타일과 관련된 요소가 많을수록 더 중요합니다. 예를 들어

#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;}

인라인 스타일 보다 우선합니다.

어떤 경우에, 당신은 대체 할 수 있습니다 height로 max-height.

위에서 언급하지 않은 답변을 추가하고 싶습니다. 위의 내용을 모두 사용해 보았습니다. 내 구체적인 상황은 !important요소 에 속성 이 내장 된 semantic-ui를 사용하고 있다는 것입니다 (매우 성가시다). 나는 그것을 재정의하기 위해 모든 것을 시도했지만 결국에는 한 가지 일만했습니다 (jquery 사용). 다음과 같습니다.

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