목차
- !important 예제1 - 지정 속성값 우선 적용
- !important 정의
- !important 구문
- !important 예제2 - !important 다수 시, 명시도 같은 경우
- !important 예제3 - !important 다수 시, 명시도 다른 경우
!important 예제1 - 지정 속성값 우선 적용
[예제1] - 선택자 명시도 동일 시.
<style>
.hz{color: red !important;}
.hz {color: blue;}
</style>
<p class="hz">홈짱닷컴 (homzzang.com)</p>
[예제2] 선택자 명시도 다를 시.
<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 구문
selector {속성 :속성값!important;}
※ 속성값과 !important가 딱 달라붙어도 되고, 띄어져도 상관없음.
!important 예제2 - !important 다수 시, 명시도 같은 경우
※ 나중에 선언된 게 적용됨.
<style>
.hz {color: red !important;}
.hz {color: blue;}
.hz {color: green !important;}
</style>
<p class="hz">홈짱닷컴 (homzzang.com)</p>
결과보기
!important 예제3 - !important 다수 시, 명시도 다른 경우
※ 명시도 높은 게 적용됨.
<style>
div .hz {color: red !important;}
.hz {color: blue;}
.hz {color: green !important;}
</style>
<div>
<p class="hz">홈짱닷컴 (homzzang.com)</p>
</div>
결과보기
