CSS 특이성 설명: 어떤 스타일이 유리한지 제어하는 ​​방법

왜 그 완고한 스타일이 적용되지 않는지 궁금해하면서 CSS를 수정하는 데 몇 시간을 소비한 적이 있습니까? 특수성의 세계에 오신 것을 환영합니다.

구체성은 여러 규칙이 동일한 요소를 대상으로 할 때 브라우저가 어떤 CSS 규칙을 적용할지 결정하는 방식입니다. 이를 이해하지 못하면 스타일시트가 금세 엉키게 될 수 있습니다. 분석해 보겠습니다.

특이성 계층

1. 범용 선택기: 영점 경쟁자

범용 선택자(*)는 0점으로 특이성 체인의 맨 아래에 있습니다. 이는 모든 것에 대한 포괄적인 규칙과 같지만 거의 모든 것에 의해 무시됩니다.

예:

* {
  color: red;
}
h1 {
  color: blue;
}

* { color: red; },

요소 선택자가 승리하므로 파란색이 됩니다.

2. 요소 선택기: 특이성 1점

요소 선택자(h1, p, div)는 범용 선택자보다 강력하며 1포인트를 전달합니다.

예:

h1 {
  color: green;
}

이 규칙은 동일한 요소를 타겟팅하는 범용 선택기를 재정의합니다.

3. 클래스, 의사 클래스, 속성 선택자: 10점

.button, :hover 또는 [type="text"]와 같은 선택기는 10포인트로 더 구체적입니다.

예:

.button {
  color: purple;
}

이것은 범용 선택기와 요소 선택기를 모두 재정의합니다.

4. ID 선택기: 100포인트

ID(#submitButton)는 100포인트로 훨씬 더 강력합니다. 스타일을 관리하기 어렵게 만들 수 있으므로 드물게 사용하십시오.

예:

#submitButton {
  background-color: yellow;
}

5. 인라인 스타일: 1,000포인트 – 헤비급

인라인 스타일은 !important를 제외한 모든 스타일보다 우선합니다.

예:

<div>



<h4>
  
  
  6. The Almighty !important
</h4>

<p>Adding !important forces a rule to override others, even inline styles. But overusing it can lead to chaos in your CSS. It can be necessary when using third-party libraries to help override predefined styles.</p>

<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false">.button {
  color: red !important;
}

특이성이 연결되면 순서가 중요합니다

두 규칙의 구체성이 동일한 경우 스타일시트에서 나중에 나오는 규칙이 우선합니다.

예:

h1 {
  color: red;
}
h1 {
  color: green;
}

여기서

두 번째 규칙이 나중이므로 녹색이 됩니다.

특이성 포인트 요약

• 범용 선택기(*): 0점
• 요소 선택기(div, p): 1포인트
• 클래스, 의사 클래스, 속성 선택기: 10점
• ID 선택기(#id): 100점
• 인라인 스타일: 1,000포인트
• !important: 모든 것을 재정의합니다.

특이성을 익히면 깔끔하고 유지 관리가 가능한 CSS를 작성하여 끝없는 디버깅을 피할 수 있습니다. 다음에 스타일이 제대로 작동하지 않으면 정확히 어디를 봐야 할지 알게 될 것입니다.

위 내용은 CSS 특이성 설명: 어떤 스타일이 유리한지 제어하는 ​​방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!