CSS !중요한 규칙
!중요한 것은 무엇입니까?
CSS 의 !important규칙은 일반보다 속성/값에 더 많은 중요성을 추가하는 데 사용됩니다.
사실, !important규칙을 사용하면 해당 요소의 특정 속성에 대한 모든 이전 스타일 지정 규칙을 재정의합니다!
예를 살펴보겠습니다.
예시
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
예시 설명
위의 예에서. ID 선택기와 클래스 선택기가 더 높은 특이성을 가지고 있더라도 세 단락 모두 빨간색 배경색을 갖습니다. 규칙 은 두 경우 모두 속성을 !important재정의합니다 .
background-color
중요 정보 !중요
규칙 을 무시하는 유일한 방법
은 소스 코드에서 동일(또는 더 높은) 특이성을 가진 선언에 !important
다른 규칙을 포함 하는 것입니다. 여기서 문제가 시작됩니다! !important이것은 CSS 코드를 혼란스럽게 만들고 특히 큰 스타일 시트가 있는 경우 디버깅이 어려울 것입니다!
여기에서 간단한 예제를 만들었습니다. CSS 소스 코드를 보면 어떤 색상이 가장 중요한지 명확하지 않습니다.
예시
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
팁: 규칙 에 대해 아는 것이 좋습니다 !important
. 일부 CSS 소스 코드에서 볼 수 있습니다. 그러나 꼭 필요한 경우가 아니면 사용하지 마십시오.
하나 또는 두 개의 공정한 사용 !중요
사용하는 한 가지 방법 !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;
}