본문 바로가기
IT/HTML & CSS & JavaScript

[CSS] !important - 속성값 우선 적용방법

by 베베야 2021. 9. 16.
728x90

이번 시간에는 속성값 적용 순위를 우선적으로 변경하는
!important 속성에 대해서 알아보겠습니다.



문법

property: value !important;
CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용됩니다. 
만약 나중에 설정한 값이 적용되지 않게 하려면 먼저 설정한 속성값 뒤에 !important를 붙여주어야 합니다.


예문

1. 글자의 색상은 가장 마지막에 설정한
blue 색상을 따라가기 때문에 파란색 적용됩니다.

p {
    color: red;
  }
p {
    color: green;
  }
p {
    color: blue;
  }



2. 글자의 색을 빨간색으로 설정하고 싶다면
red 속성 뒤에 important를 추가해 줍니다.

p {
    color: red  !important;
  }
p {
    color: green;
  }
p {
    color: blue;
  }



3. 초록색 글자로 적용하려면 추가적으로
green 속성에 important 를 추가해 줍니다.

p {
    color: red !important;
  }
p {
    color: green !important;
  }
p {
    color: blue;
  }


 

반응형
그리드형

댓글