CSS에서 !important를 사용하는 방법에 대한 자세한 그래픽 설명

작업에서 선택기 우선순위로 인해 렌더링할 수 없는 스타일이 자주 발생합니다. 이 경우 특별한 CSS 속성이 사용됩니다. 이것이 중요합니다. !important는 속성 값에 가장 높은 우선순위를 부여하며, 이를 사용하여 원하는 스타일을 설정할 수 있습니다. 그렇다면 CSS에서 중요한 사용법에 대해 이야기해 보겠습니다. 도움이 필요한 친구들이 와서 살펴볼 수 있습니다.

1. CSS !important의 기능 및 사용법

기능: 지정된 스타일 규칙의 적용 우선순위를 향상시킵니다. 즉, !important는 스타일의 가중치를 높이는 방법을 제공하여 브라우저가 이 명령문을 실행할 수 있도록 합니다. 첫 번째.

사용 방법: selector {style: value!important}
예를 들어 CSS에 .box{color:red !important;} 속성이 제공되면 클래스 이름 box가 있는 레이블이 가장 높은 우선순위를 갖는다는 의미입니다. 기본 색상을 무엇으로 설정하든 결국에는 빨간색만 표시됩니다.

2. CSS !중요 예제 분석

코드의 첫 번째 줄은 상위 요소에 있는 모든 div의 글꼴 색상을 빨간색으로 설정하고, 두 번째와 세 번째 줄은 클래스를 사용하여 자체 div의 글꼴 색상을 재정의합니다. 파란색. 중요한 점은 세 번째 줄에는 사용되지만 두 번째 줄에는 사용되지 않는다는 점입니다! .

HTML 부분:

<div id="father">
      <div class="aa">PHP中文网欢迎大家来学习</div>
      <div class="bb">PHP中文网欢迎大家来学习</div>
  </div>

CSS 부분:

#father div{
       color:red;
  }
  .aa{
       color:blue;
  }
  .bb{
       color:blue !important;
  }

Rendering:

결과는 사진을 보면 알 수 있는데 왜 이럴까요?

기본적으로 ID 선택자는 클래스 선택자보다 우선순위가 높으므로 두 번째 줄의 클래스로 자신의 스타일을 재정의하더라도 상위 속성이 상속되며 텍스트가 적용됩니다. 이 줄은 여전히 ​​빨간색입니다. 하지만 세 번째 줄에는 우선순위가 가장 높은 important가 사용되므로 여기서 CSS 스타일이 적용되고 단어가 파란색으로 변합니다.

참고:

1 IE6 및 이전 브라우저에서는 !important가 동일한 규칙 세트에 적용되지 않습니다.

2. 축약된 스타일 속성에 !important를 사용하는 경우 이 축약된 스타일 속성이 나타내는 하위 속성은 !important의 영향을 받습니다.
3. 중요 키워드는 스타일 줄 끝과 줄의 세미콜론 앞에 배치되어야 합니다. 그렇지 않으면 아무런 효과가 없습니다.

위 내용은 CSS에서 !important를 사용하는 방법에 대한 자세한 그래픽 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!