CSS 선택기 우선순위란 무엇입니까?

下次还敢
풀어 주다: 2024-04-25 17:30:26
원래의
1104명이 탐색했습니다.

CSS 선택기 우선순위는 다음 순서로 결정됩니다: 전문 분야(ID > 클래스 > 유형 > 와일드카드) 소스 순서(인라인 > 내부 스타일시트 > 외부 스타일시트 > 사용자 에이전트 스타일시트) 선언 순서(나중 선언이 우선 적용됨) ) 중요도(!important는 우선순위를 높임)

CSS 선택기 우선순위란 무엇입니까?

CSS 선택기 우선순위

CSS 선택기 우선순위는 요소 장치에 여러 선택기를 적용할 때 어느 것을 선택할지 결정합니다. 우선순위가 높은 선택기는 우선순위가 낮은 동일한 유형의 선택기를 재정의합니다.

CSS 선택기 우선순위는 높은 것부터 낮은 것 순으로 정렬된 다음 네 가지 측면에 따라 결정됩니다.

1. 특이성

특이성은 선택기에 사용되는 선택기 유형의 수와 위치에 따라 결정됩니다. 다음 유형의 선택기의 구체성이 증가합니다.

  • ID 선택기(#)
  • 클래스 선택기(.)
  • 유형 선택기(html, body 등)
  • 와일드카드(*)

2.

두 개의 선택기가 동일한 특이성을 갖는 경우 더 구체적인 소스에서 시작된 선택기가 우선합니다. 소스 순서는 다음과 같습니다.

  • 인라인 스타일
  • 내부 스타일 시트
  • 외부 스타일 시트
  • 사용자 에이전트 스타일 시트

3. 선언 순서

두 선택기의 구체성과 소스 순서가 동일한 경우 , CSS 문서에서 나중에 작성된 선언이 더 높은 우선순위를 갖습니다.

4. 중요도

!important 키워드는 선택기의 우선순위를 강제로 높일 수 있습니다. 그러나 CSS의 유지 관리성을 손상시키므로 사용을 피해야 합니다. !important 关键字可以强制提高选择器的优先级。然而,它的使用应避免,因为它会破坏 CSS 的可维护性。

示例:

以下示例说明了优先级的应用:

<code class="css">#primary {
  color: red;
}

.bold {
  color: blue;
}

p {
  color: green;
}

body {
  color: black;
}

p.bold {
  color: purple !important;
}</code>
로그인 후 복사

在上面的示例中,p.bold 的特殊性为 2(类型选择器 + 类选择器),并且声明中包含 !important,因此具有最高的优先级。因此,对于具有 p.bold 类的段落,p.bold 的样式(紫色)将被应用,而不是 #primary(特殊性为 1)、.bold(特殊性为 1)或 p

🎜예: 🎜🎜🎜다음 예는 우선순위 적용을 보여줍니다. 🎜rrreee🎜위 예에서 p.bold의 구체성은 2(유형 선택기 + 클래스 선택기)이며 선언에는 !important가 포함되어 있으므로 우선순위가 가장 높습니다. 따라서 p.bold 클래스가 있는 단락의 경우 #primary(특수) 대신 p.bold 스타일(보라색)이 적용됩니다. 특이도 1), .bold(특이도 1) 또는 p(특이도 0) 스타일입니다. 🎜

위 내용은 CSS 선택기 우선순위란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!