CSS 우선순위를 계산하는 방법은 무엇입니까? CSS 우선순위가 무엇인지에 대한 심층적인 이해를 제공합니다.

CSS 우선순위는 일부 친구에게는 이해하기 쉽지 않을 수 있으므로 이 기사에서는 CSS 스타일 우선순위 및 CSS 선택기 우선순위 계산 방법에 대한 심층적인 이해를 제공합니다.

CSS 스타일 우선순위를 이해하는 가장 좋은 방법은 예제부터 시작하는 것입니다. 그런 다음 어떤 선택기가 우선할지 결정하기 위해 실제 우선순위를 계산하는 방법을 자세히 살펴보겠습니다.

PS: 권장 학습: CSS 비디오 튜토리얼

순서가 지정되지 않은 간단한 목록은 다음과 같습니다.

<ul id="summer-drinks">
   <li>汽水</li>
   <li>啤酒</li>
   <li>果汁</li></ul>

이제 좋아하는 음료 중 하나를 지정하고 스타일을 변경하려는 경우. 목록 요소의 클래스 이름을 통해 적용할 수 있습니다.

<ul id="summer-drinks">
   <li class="favorite">汽水</li>
   <li>啤酒</li>
   <li>果汁</li></ul>

이제 CSS에서 스타일을 추가할 수 있습니다

.favorite {
  color: red;
  font-weight: bold;
}

그런 다음 구현을 살펴보면 이 스타일이 아무런 효과가 없다는 것을 알 수 있습니다! 스타일을 추가하기 위해 선택한 음료가 빨간색으로 변하지 않았고 글꼴이 굵게 표시되지 않았습니다

CSS의 코드를 주의 깊게 살펴보면 두 개의 선택기가 있음을 알 수 있습니다

ul#summer-drinks li {
   font-weight: normal;
   font-size: 12px;
   color: black;}

두 개의 서로 다른 CSS 선택기가 모두 텍스트 색상과 글꼴을 정의합니다. 글꼴 무게. 글꼴 크기에 대한 선언은 하나만 있으므로 분명히 하나가 적용됩니다. 이는 "충돌"이 아니지만 브라우저는 이러한 정의 중 어떤 정의를 구현해야 하는지 결정해야 합니다. 이는 표준 우선순위 규칙 세트를 따라 수행됩니다.

일부 초보자는 아직 완전히 이해하지 못했기 때문에 혼란스러울 수 있습니다. 그들은 .favorite 문이 "CSS에서 더 상위"이거나 HTML에서 class="favorite"가 "실제 텍스트에 더 가깝기" 때문에 그것이 우선권을 가질 것이라고 생각할 수도 있습니다. 실제로 CSS의 선택기 순서가 중요한 역할을 합니다. 우선순위가 정확히 동일하면 나중에 정의된 콘텐츠가 실제로 먼저 실행됩니다. 예를 들면 다음과 같습니다.

.favorite {
   color: red;
}
.favorite {
   color: green;
}

실행 결과 글꼴 색상이 녹색으로 변합니다

여기서 가장 중요한 점은 최대한 구체적으로 이해하고 싶다는 것입니다. 위에서 언급한 간단한 예를 사용하더라도 "좋아하는 음료"를 찾기 위해 클래스 이름을 사용하는 것만으로는 문제가 해결되지 않거나 작동하더라도 매우 안전하지 않다는 것을 결국 이해하게 될 것입니다. 다음을 사용하여 구체적으로 정의할 수 있습니다.

ul#summer-drinks li.favorite {
  color: red;
  font-weight: bold;
}

이것이 제가 "구체적인 것이 의미가 있다"라고 부르는 것입니다. 실제로는 더 구체적으로 다음과 같이 사용할 수 있습니다.

html body div#pagewrap ul#summer-drinks li.favorite {
  color: red;
  font-weight: bold;
}

하지만 때로는 코드가 너무 길어질 때도 있습니다. CSS 코드를 읽기 어렵게 만들고 실질적인 이점을 제공하지 않습니다. ".favorite" 클래스에 대한 특이성 값을 추출하는 또 다른 방법은 ! 중요한 진술.

.favorite {
  color: red !important;
  font-weight: bold !important;
}

한번 들어본 적 있어요! 중요한 것은 CSS의 Jedi 사고 방식입니다. 또한 이를 사용하여 요소의 스타일을 강제로 지정할 수 있다는 것도 사실입니다. 그러나 특정 선택자의 사용 특이성을 크게 높이면 불필요한 문제가 발생할 수 있습니다. 만약 오해하고 있다면! 중요한 진술은 쉽게 남용될 수 있습니다. 예를 들어 특정 클래스 선택기가 있는 요소가 특정 스타일 세트를 사용해야 한다는 것을 알고 있는 경우 CSS를 깔끔하게 유지하는 데 가장 적합합니다. 오히려 원래 작성자가 CSS를 어떻게 구성하고 사용했는지 파악하지 않고 스타일을 재정의하는 빠른 방법으로 사용되는 것이 아닙니다.

제 전형적인 예는 다음과 같습니다.

.last {
   margin-right: 0 !important;
}

CSS 선택기 우선순위 계산

색상과 글꼴 두께를 변경하려는 첫 번째 시도가 실패한 이유는 무엇입니까? 우리가 알고 있듯이 이는 단순히 클래스 이름 자체를 사용하는 것이 우선 순위가 낮고 순서가 지정되지 않은 목록을 찾기 위해 ID 값을 사용하는 다른 선택기에 의해 재정의되기 때문입니다. 이 문장에서 중요한 단어는 class와 id입니다. CSS는 클래스와 ID에 매우 다른 우선순위 가중치를 적용합니다. 사실 ID는 무한한 우선순위 값을 가지고 있습니다! 즉, 어떤 카테고리도 ID보다 우선순위를 가질 수 없습니다.

숫자가 실제로 어떻게 계산되는지 살펴보겠습니다.

다르게 표현하면:

요소에 인라인 스타일이 있는 경우 자동으로 1승(1,0,0,0포인트)

각 ID 값에 대해 , 0,1,0,0 도트 적용

각 클래스 값(또는 의사 클래스 또는 속성 선택기)에 대해 0,0,1,0 도트 적용

각 요소 참조에 대해 0 ,0,0,1 적용 포인트

일반적으로 값은 마치 숫자인 것처럼 읽을 수 있습니다. 예를 들어 1,0,0,0은 "1000"이므로 0,1,0,0 또는 "100"보다 명확하게 특이성이 좋습니다. 기술적으로 0,1,1,3,4와 같은 우선순위 값을 가질 수 있고 "13"은 베이스를 오버플로하지 않기 때문에 쉼표는 이것이 실제로 "베이스 10" 시스템이 아니라는 점을 상기시키기 위해 존재합니다. 10 시스템 회의.

샘플 계산

not()sort-of-pseudo-class 자체에는 우선순위가 없으며 괄호 안의 내용만 우선순위 값에 추가합니다.

중요 사항

#🎜🎜 # 범용 선택기(*)에는 우선 순위 값(0,0,0,0)이 없습니다.

의사 요소(예: 첫 번째 행)는 의사 클래스와 달리 0,0,0,1을 얻습니다. Brother는 0을 얻습니다. 0,1,0

의사 클래스: not() 자체에는 우선순위가 없으며 괄호 안의 내용만 있습니다.

CSS 속성 값을 추가했습니다! 중요한 가치는 자동 승자입니다. 마크업의 인라인 스타일도 재정의합니다. 커버 가능해요! 중요한 값을 얻는 유일한 방법은 나중에 CSS에서 선언된 다른 값을 사용하는 것입니다! 중요한 규칙이 아니면 동일하거나 더 큰 특이도 값을 갖습니다. 특정 값에 1,0,0,0,0을 더하는 것으로 생각할 수 있습니다.

위 내용은 CSS 우선순위를 계산하는 방법은 무엇입니까? CSS 우선순위가 무엇인지에 대한 심층적인 이해를 제공합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!