WordPress 템플릿의 원래 CSS를 재정의하는 사용자 지정 스타일 시트를 만들었습니다. 그러나 내 캘린더 페이지에서 원래 CSS는 !important
선언으로 설정된 각 테이블 셀의 높이를 갖습니다 .
td {height: 100px !important}
이것을 무시할 수있는 방법이 있습니까?
답변
중요 수정 자 재정의
- 로 다른 CSS 규칙을 추가
!important
하고 선택기에 더 높은 고유성을 부여합니다 (선택기에 태그, ID 또는 클래스 추가 추가). - 기존 선택기보다 나중에 선택기에서 동일한 선택기를 사용하여 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
.