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

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!