CSS 규칙이 계단식으로 적용될 때 우선순위 알고리즘

CSS 규칙의 우선순위는 웹 프런트엔드 개발자가 이해해야 할 개념입니다. 스타일을 추가하는 데 일반적으로 사용되는 방법은 4가지입니다.

1. 인라인 스타일
2. 내장 스타일
4. 사용자 스타일

인라인 스타일은 보기 흉하고 HTML 문서에서 셔틀됩니다. HTML 요소를 사용하면 웹 프런트엔드 개발자에게 많은 문제가 발생합니다. 종종 다음과 같이 나타납니다.

<p style="color:red;">This is a paragraph.</p>

임베디드 스타일은 인라인 스타일보다 더 신사적입니다. HTML 문서에도 있지만 HTML 요소와 얽히는 일이 없습니다. 이는 c9ccee2e6ea535a969eb3f532ad9fe89 요소에 자주 나타납니다.

<style type="text/css" media="screen"> 
    p{ 
        color : red; 
    } 
</style>

외부 스타일은 HTML에 머물기를 원하지 않으므로 단순히 외부 파일 형식으로 독립적으로 존재합니다. . 일반적으로 HTML로 가져오기 위해 2cdf5bf648cf2f33323966d7f58a7f3f 요소나 @import 문을 사용합니다.

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

외적인 스타일을 최대한 활용해야 하는 이유는 다들 아실 것 같아서 반복하지 않겠습니다.

위 세 가지와 조금 다른 사용자 스타일도 있습니다. IE 브라우저를 사용하는 경우 도구 - 인터넷 옵션 - 일반 - 모양 - 접근성 - 사용자에서 사용자 스타일을 추가하는 방법을 찾을 수 있습니다. 스타일 시트 위치(중국어 버전의 IE 브라우저가 없는 점 양해해 주세요).

스타일을 추가하는 방법이 너무 많기 때문에 스타일 계단식을 피하기가 어렵습니다. 예를 들면 다음과 같습니다.

<p class="intro" style="color:red;">This is a paragraph.</p>

위의 인라인 스타일을 사용하는 동시에 외부 스타일에도 사용합니다.

p{ 
    color : yellow; 
}

55fb0b18a0f208ea0473e6404f3642b0 요소에는 색상 속성을 지정하는 세 가지 CSS 규칙이 있습니다. 2. 진술의 중요도와 출처에 따라 우선순위를 정하세요

중요도에는

중요와 보통(중요하지 않음)

CSS 규칙 뒤에 !important를 추가하는 것이 추가하지 않는 것보다 더 중요합니다.

세 가지 소스가 있습니다.

사용자 에이전트 스타일시트 – 브라우저 기본 스타일

작성자 스타일시트 – 개발자 정의 스타일

사용자 스타일시트 – 사용자 탐색 우선순위

도구에 정의된 스타일 중 낮은 것부터 높은 순은 다음과 같습니다.

사용자 에이전트 스타일시트

사용자 스타일 시트의 일반 규칙

작성자의 일반 규칙 스타일 시트

작성자 스타일 시트의 중요 규칙

사용자 스타일 시트의 중요 규칙

위 정렬 후 CSS 규칙이 있으면 다른 모든 규칙보다 우선순위가 높습니다. 경쟁 규칙에 따라 알고리즘이 종료되고 가장 높은 우선 순위로 지정된 값이 반환됩니다. 우선순위가 가장 높은 CSS 규칙이 여러 개 있는 경우 계속해서 경쟁하며 알고리즘은 3단계로 들어갑니다.

3. 구체성별 정렬

CSS는 여러 규칙에서 각 규칙에 지정된 선택자의 구체성 값을 계산합니다.

특수성 값은 a, b, c, d의 4개 정수로 구성된 배열과 같은 값입니다. 여기서 a는 가장 높은 가중치를 가지며, d는 가장 낮은 가중치를 갖습니다. 선택자 특정성 값의 계산 방법은 다음과 같습니다.

규칙이 인라인 스타일인 경우 a = 1입니다.

규칙이 선택자로 지정되면 선택자에 나타나는 id 선택자의 개수는 b의 값입니다. 🎜>선택자에 의해 규칙이 지정된 경우 선택자에 나타나는 속성 선택자(클래스 선택자 포함) 또는 의사 클래스 선택자의 수의 합은 c의 값입니다.
선택자에 의해 규칙이 지정된 경우 선택자에 나타나는 요소 선택자 또는 의사 요소 선택자는 수량의 합이 d 값입니다.

유니버설 셀렉터 *의 특이도 값은 0,0,0,0입니다.

공식 홈페이지에서는 이해를 돕기 위해 몇 가지 예시를 제공하고 있습니다.

Da bei der Sortierung nach dem Spezifitätswert a das höchste Gewicht hat, wird a zuerst verglichen. Wenn a gleich ist, wird b verglichen und so weiter. Unabhängig davon, wie groß die Werte von b, c und d sind, weist der Inline-Stil daher immer die höchste Spezifität auf.

Wenn nach der Sortierung nach den oben genannten Besonderheiten eine CSS-Regel mit einer höheren Priorität als alle anderen konkurrierenden Regeln vorliegt, endet der Algorithmus und es wird der durch die höchste Priorität angegebene Wert zurückgegeben. Wenn es mehrere CSS-Regeln mit der höchsten Priorität gibt, konkurrieren diese weiterhin und der Algorithmus geht in Schritt 4 über.

4. Vergleichen Sie die Reihenfolge, in der CSS-Regeln im Dokument erscheinen

Diejenige, die später erscheint, hat immer eine höhere Priorität als die, die früher erscheint erscheint in Die letzte Anweisung wird als Wert der Eigenschaft verwendet.