CSS에서 !important를 사용하여 인라인 스타일을 재정의하는 방법은 무엇입니까?

CSS로 !important 속성 재정의

웹 개발에서 !important 속성은 CSS 규칙을 재정의하고 특정 스타일 속성이 우선하도록 하는 데 자주 사용됩니다. 하지만 이미 !important 속성이 포함된 인라인 스타일을 재정의해야 하는 경우에는 어떻게 해야 할까요? 이를 수행할 수 있는 방법이 있습니까?

과제: !important로 인라인 스타일 재정의

다음 HTML 코드를 고려하세요.

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

이 예에서 < ;div> 요소는 숨겨지도록 설정되어 있으며 !important 속성은 후속 CSS 규칙에 의해 이 속성이 재정의될 수 없도록 보장합니다.

해결책: 클래스 선택기와 !important 사용

인라인 스타일을 다음으로 재정의하려면 !important 속성에는 클래스 선택기를 사용할 수 있습니다. 방법은 다음과 같습니다.

• 요소에 클래스 추가:

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

• 이제 클래스 선택기를 대상으로 하고 !important를 포함하는 CSS 규칙을 만듭니다. 속성:

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

이 CSS 규칙은 인라인 스타일을 재정의하고