• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

목차

  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>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
intro CSS - inherit (인헤리트) - 상속개념 ★
intro CSS - !important 키워드 - 당해 속성값 강제 우선적용 (= 우선순위표시 = 느낌표임포턴트)
intro CSS - CSS3 입문
intro CSS - 브라우저 접두어 (= vendor prefix = 벤더 프리픽스)
intro CSS - @charset 구문 - 스타일시트 인코딩방식 설정 (= 언어셋지정/문자셋지정 = @charset…
intro CSS - CSS RESET(= CSS리셋 = CSS초기화 = HTML요소초기화)
intro CSS - @import 구문 - 지정 외부스타일시트파일을 현재 스타일시트에 삽입/가져오기 (= @impor…
목록
찾아주셔서 감사합니다. Since 2012