CSS 강좌 | Reference > !important

개요

CSS는 나중에 설정한 값이 적용됩니다.

만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙이면 됩니다.

문법

property: value !important;

예를 들어

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

는 문단의 글자색을 파란색으로 만듭니다. 하지만

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

는 문단의 글자색이 빨간색이 됩니다.

다시 속성값을 재설정하고 싶으면 !important를 다시 붙여주면 됩니다. 예를 들어

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

는 문단의 글자색을 녹색으로 만듭니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS Reference</title>
    <style>
      h1 {
        padding: 20px;
        border: 1px solid blue !important;
        color: red !important;
      }
      h1 {
        border: 1px solid red;
        color: green !important;
      }
    </style>
  </head>
  <body>
    <h1>Lorem ipsum dolor.</h1>
  </body>
</html>

Category

Created on 2016-11-21 02:52 | Updated on 2017-03-24 01:24

이 글을 공유하기

Kakao