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

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

7,562  

목차

  1. !important 예제1 - 지정 속성값 우선 적용
  2. !important 정의
  3. !important 구문
  4. !important 예제2 - !important 다수 시, 명시도 같은 경우
  5. !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>

 

결과보기



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