CSS !important 규칙

!important는 무엇인가요?

CSS에서: !important 규칙은 특정 속성/값에 대해 일반 스타일보다 높은 우선순위를 부여합니다.

실제로, 그렇게 사용하면: !important 규칙은 이 특정 속성에 대한 이 요소 상의 모든 이전 스타일 규칙을 덮습니다!

예제를 보겠습니다:

예제

#myid {
  background-color: blue;
}
.myclass {
  background-color: gray;
}
p {
  background-color: red !important;
}

직접 시도해보세요

예제 설명

위의 예제에서, 모든 세 개의 파트는 빨간 배경색을 얻게 됩니다.尽管 ID 선택자와 클래스 선택자가 더 높은 특성성을 가지지만:!important 규칙은 이 두 경우의 background-color 속성을 덮습니다.

!important에 대한 중요 사항

덮기 !important 규칙을 덮는 유일한 방법은 소스 코드에 다른 특성성이 동일하거나 더 높은 특성성을 가진 선언을 포함하는 것입니다 !important 규칙 - 이것이 문제의 시작입니다! 이는 CSS 코드를 혼란스럽게 하고, 디버깅도 어려워집니다, 특히 대형 스타일 시트가 있는 경우!

여기서 우리는 간단한 예제를 만들었습니다. CSS 소스 코드를 확인할 때, 어떤 색이 가장 중요한 것으로 간주되는지는 명확하지 않습니다:

예제

#myid {
  background-color: blue !important;
}
.myclass {
  background-color: gray !important;
}
p {
  background-color: red !important;
}

직접 시도해보세요

훌륭한 팁:알아야 할 것: !important 규칙은 좋습니다. CSS 소스 코드에서 그것을 볼 수 있습니다. 그러나, 절대로 필요하지 않다면 사용하지 마세요.

가능한 경우에는 !important를 사용할 수 있는 몇 가지 합리적인 사용 사례가 있습니다

또한 사용할 수 있는 방법은: !important 의 경우는, 다른 방법으로 덮을 수 없는 스타일을 덮어야 한다면 경우입니다. 이는CMS를 사용하고 CSS 코드를 편집할 수 없는 경우일 수 있습니다. 그렇다면 일부 사용자 정의 스타일을 설정하여 CMS 스타일을 덮을 수 있습니다.

또한 사용할 수 있는 방법은: !important 의 경우는: 페이지 상의 모든 버튼이 특별한 외관을 가지기를 원한다고 가정해 봅시다. 여기서 버튼의 스타일은 회색 배경색, 흰 텍스트 그리고 일부 내간격과 경계선입니다:

예제

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

직접 시도해보세요

또는 버튼을 더 특성화된 다른 요소에 배치하면 버튼의 외관이 바뀔 수 있으며 속성이 충돌할 수 있습니다. 다음은 예제입니다:

예제

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

직접 시도해보세요

모든 버튼이 언제나 동일한 외관을 가지도록 "강제"할 수 있는 방법으로, 다음과 같이 할 수 있습니다: !important 규칙을 버튼 속성에 추가하면 다음과 같이 됩니다:

예제

.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

직접 시도해보세요