CSS에서 !important의 사용을 깊이 이해

이 글은 CSS 스타일의 우선순위에 초점을 맞추며 주로 CSS에 대해 이야기합니다! 사용법이 중요해요, 이 지식을 배우고 있는 친구들이 한번 살펴보시면 도움이 되실 거라 믿습니다!

!important는 개발자에게 스타일 가중치를 높이는 방법을 제공합니다. !important는 이 스타일의 속성과 속성값을 포함한 전체 스타일에 대한 선언이라는 점에 유의하세요

<style type="text/css">
a{color:green!important;}
#main a{ color:blue;}
</style>
<div id="main">
<a>!important实例</a>
</div>

위 코드에서 중요한 속성이 추가되지 않으면 하이퍼링크 색상이 파란색으로 표시됩니다 , 하지만 중요 항목을 추가한 후에는 우선 순위가 높아지고 표시 색상이 녹색으로 표시됩니다.

<style>
#Box div{
     color:red;
}
.important_false{
     color:blue;
}
important_true{
     color:blue !important;
}
</style>
<div id="Box">
    <div class="important_false">这一行末使用important</div>
    <div class="important_true">这一行使用了important</div>
</div>

CSS 코드의 첫 번째 줄은 상자에 있는 모든 div의 글꼴 색상을 빨간색으로 설정합니다. 두 번째와 세 번째 줄은 모두 클래스를 사용하여 자체 div의 글꼴 색상을 파란색으로 재정의합니다. 두 번째 줄은 important를, 세 번째 줄은 !를 사용합니다.
기본적으로 클래스의 우선순위는 id보다 낮습니다. 따라서 두 번째 줄에서 클래스를 사용하여 자신만의 스타일을 재정의하더라도 적용되지 않습니다. 따라서 상위 속성을 상속받는 경우 이 텍스트 줄은 다음과 같습니다. 아직 빨간색이에요!
그러나 세 번째 줄에서는 중요도를 높이기 위해 사용(또는 강제 재정의로 간주)되므로 여기 CSS가 적용되어 이 텍스트 줄이 파란색으로 변합니다!

또 한 가지 주목할 점은 스타일을 다음과 같이 작성하는 경우입니다.

.testClass{ 
color:blue !important; color:red;
}

이 작성 방법은 IE6에서 인식할 수 없습니다. !important는 빨간색으로 표시되지만 다음 방법을 사용하여 IE6에서 !important

를 인식하도록 할 수도 있습니다. 으아악

위 내용은 CSS에서 !important의 사용을 깊이 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!