• Q&A
  • 회원가입
  • 로그인

[intro] CSS - !important - 당해 속성값 강제 우선적용 (= 우선순위표시)

!important 예제1

<style>
.hz{color: red !important;}
.hz {color: blue;}
</style>
 
<p class="hz">홈짱닷컴 (homzzang.com)</p>

 
<style>
.hz {color: red !important;}
div .hz {color: blue;}
</style>
 
<div>
  <p class="hz">홈짱닷컴 (homzzang.com)</p>
</div>
 
 
 
!important 정의
 
당해 속성값 우선 적용.

 


 
1.
!important가 한번만 붙은 경우,
명시도와 상관없이 !important 붙은 속성값이 우선 적용됨. (예제1)
 
2.
!important가 여러 번 붙은 경우,
명시도 같으면 나중 것이 우선 적용되나 (예제2)
명시도 다르면 명시도 높은 것이 우선 적용됨. (예제3)
 
3.
모든 브라우저 지원.
 

 
!important 구문
 
선택자 {속성 :속성값 !important;}
 
※ 속성값과 !important가 딱 달라붙어도 되고, 띄어져도 상관없음. 
 
 
!important 예제2

 

<style>

.hz {color: red !important;}

.hz {color: blue;}

.hz {color: green  !important;}

</style>

 

<p class="hz">홈짱닷컴 (homzzang.com)</p>

 

결과보기


 
!important 예제3

 

<style>

div .hz {color: red !important;}

.hz {color: blue;}

.hz {color: green !important;}

</style>

 

<div>
    <p class="hz">홈짱닷컴 (homzzang.com)</p>
</div>

 

결과보기


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012