CSS 선택기 우선순위는 다음 순서로 결정됩니다: 전문 분야(ID > 클래스 > 유형 > 와일드카드) 소스 순서(인라인 > 내부 스타일시트 > 외부 스타일시트 > 사용자 에이전트 스타일시트) 선언 순서(나중 선언이 우선 적용됨) ) 중요도(!important는 우선순위를 높임)
CSS 선택기 우선순위
CSS 선택기 우선순위는 요소 장치에 여러 선택기를 적용할 때 어느 것을 선택할지 결정합니다. 우선순위가 높은 선택기는 우선순위가 낮은 동일한 유형의 선택기를 재정의합니다.
CSS 선택기 우선순위는 높은 것부터 낮은 것 순으로 정렬된 다음 네 가지 측면에 따라 결정됩니다.
1. 특이성
특이성은 선택기에 사용되는 선택기 유형의 수와 위치에 따라 결정됩니다. 다음 유형의 선택기의 구체성이 증가합니다.
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
p.bold
의 구체성은 2(유형 선택기 + 클래스 선택기)이며 선언에는 !important
가 포함되어 있으므로 우선순위가 가장 높습니다. 따라서 p.bold
클래스가 있는 단락의 경우 #primary
(특수) 대신 p.bold
스타일(보라색)이 적용됩니다. 특이도 1), .bold
(특이도 1) 또는 p
(특이도 0) 스타일입니다. 🎜위 내용은 CSS 선택기 우선순위란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!