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

목차

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

!important 예제1 - 지정 속성값 우선 적용

!important 정의

 

당해 속성값 우선 적용.

 

---

 

1.

!important가 한번만 붙은 경우,
명시도와 상관없이 !important 붙은 속성값이 우선 적용됨. (예제1)

 

2.

!important가 여러 번 붙은 경우,

명시도 같으면 나중 것이 우선 적용되나 (예제2)
명시도 다르면 명시도 높은 것이 우선 적용됨. (예제3)

 

3.

모든 브라우저 지원.

 

!important 구문

 

selector {속성 :속성값!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>

 

결과보기