속성 값이 적용이 되지 않을 때 - !important

!important

CSS는 같은 속성을 여러 번 정의했을 때,나중에 설정한 값이 우선 순위로 적용됩니다. 만약 나중에 설정한 값이 적용되지 않게 하려면 !important를 속성값 뒤에 붙입니다.

selector {
  property: value !important;
}

다음은 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만듭니다.

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

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

하지만 다음은 red에 !important가 있으므로 문단의 글자색을 빨간색으로 유지합니다.

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

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

다시 속성값을 재설정 하고 싶으면 !important를 다시 붙입니다.

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

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

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.