>웹 프론트엔드 >CSS 튜토리얼 >CSS에서 인라인 `!중요` 스타일을 재정의하는 방법은 무엇입니까?

CSS에서 인라인 `!중요` 스타일을 재정의하는 방법은 무엇입니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-10-29 05:08:30584검색

How to Override Inline `!important` Styles in CSS?

인라인 !important 스타일 재정의

CSS에서 !important 플래그는 스타일 속성이 다른 스타일 속성보다 우선해야 함을 나타내는 데 사용됩니다. 선언. 그러나 스타일시트에서 !important를 사용하여 인라인 스타일을 재정의해야 하는 상황이 발생할 수 있습니다.

다음 HTML 요소를 고려하세요.

<code class="html"><div style="display: none !important;"></div></code>

이 요소를 표시하려면 , 인라인 스타일을 재정의하지 않으므로 스타일시트에서 다른 !important 규칙을 사용할 수 없습니다.

해결책

인라인 스타일을 !important로 재정의하려면, 보다 구체적인 선택기에서는 !important 플래그를 사용해야 합니다. 이 경우 다음과 같은 클래스 선택기를 사용할 수 있습니다.

<code class="css">div.visible {
  display: block !important;
}</code>

이 규칙은 보이는 클래스가 있는 모든 div 요소를 대상으로 하고 인라인 디스플레이: 없음 스타일을 재정의하여 요소를 표시합니다.

<code class="html"><div style="display: none !important;" class="visible"></div></code>

이 기술은 스타일시트에서 사용하는 선택기가 인라인 선택기보다 더 구체적인 경우에만 작동합니다. 또한 일반적으로 !important를 과도하게 사용하지 않는 것이 좋습니다. CSS 코드를 유지 관리하기가 더 어려워질 수 있기 때문입니다.

위 내용은 CSS에서 인라인 `!중요` 스타일을 재정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.