CSS 특이성은 어떻게 계산되나요?
P粉823268006
2023-08-23 09:46:01
<p>특이성을 조사하던 중 우연히 다음 블로그를 발견했습니다. http://www.htmldog.com/guides/cssadvanced/특이성/ </p>
<p>특이성은 CSS의 채점 시스템이라고 명시되어 있습니다. 요소값은 1포인트, 클래스값은 10포인트, ID값은 100포인트임을 알려줍니다. 계속해서 이러한 점수를 합산하여 총 점수가 선택자의 특이성이라고 말합니다. </p>
<p><strong>예: </strong>
<인용문>
<p><strong>body</strong> = 1포인트</p><p>
<strong>body .wrapper</strong> = 11포인트</p><p>
<strong>body .wrapper #container</strong> = 111포인트</p>
</인용문>
<p>따라서 이 점수를 사용하면 다음 CSS와 HTML로 인해 텍스트가 파란색으로 바뀔 것으로 예상됩니다. </p>
<p>
<pre class="brush:css;toolbar:false;">#a {
색상: 빨간색;
}
.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
파란색;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="a">
<div class="b">
<div class="c">
<div class="d">
<div class="e">
<div class="f">
<div class="g">
<div class="h">
<div class="i">
<div class="j">
<div class="k">
<div class="l">
<div class="m">
<div class="n">
<div class="o" id="a">
파란색이어야 합니다.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></pre>
</p>
<p>15개의 클래스가 150포인트이고 1개의 ID가 100포인트인 경우 텍스트가 빨간색인 이유는 무엇인가요? </p>
<p>분명히 이러한 점수는 단순히 연결되어 있는 것이 아닙니다. 자세한 내용은 여기에서 확인하세요 - http://www.stuffandnonsense.co.uk/archives/css_특이적_wars.html </p>
<p>이것은 선택기 = <code>0,0,15,0</code> 또는 <code>0,1,5,0</code>의 클래스를 의미합니까? </p>
<p>(내 직관으로는 전자여야 한다고 생각합니다. 왜냐하면 ID 선택자의 특수성이 다음과 같다는 것을 알고 있기 때문입니다: <code>0,1,0,0</code>)</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
좋은 질문입니다.
잘 모르겠습니다. 제가 찾은 모든 기사는 여기와 같은 여러 클래스의 예를 피합니다. 하지만 클래스 선택기와 ID 간의 특이성을 비교할 때 클래스는 아무리 상세해도 A 값으로만 평가됩니다.
이것은 특정 성적 행동에 대한 나의 경험과 일치합니다.15
그러나반드시 수업을 쌓아야 합니다. 왜냐하면 으아악
더 좋음으아악
좀 더 구체적으로 설명하자면, 스택 클래스의 구체성은 ID가 아닌 서로에 대해서만 계산된다는 것입니다.UPDATE: 이제 어느 정도 이해가 되네요. 이것은 점수 시스템이 아니며 클래스 가중치가 15점이라는 정보가 올바르지 않습니다. 이것은 여기에서 찾을 수 있는 매우 잘 설명된 4개 부품 번호 지정 시스템입니다.
시작점은 4개의 숫자입니다:으아악
W3C의 특이성에 대한 설명에 따르면 위 규칙의 특이성 값은 다음과 같습니다. 으아악
이것은 매우 큰(정의되지 않은?) 기반의 번호 매기기 시스템입니다.
제가 이해한 바에 따르면 밑수가 매우 크기 때문에 4열의 어떤 숫자도 3열의 0보다 큰 숫자를 이길 수 없으며, 2열의 경우도 마찬가지이고 1열의 경우도 마찬가지입니다.... 이게 맞나요? 이해가 맞나요?
수학을 더 잘 이해하는 사람이 이 번호 매기기 체계와 개별 요소가 9보다 큰 경우 이를 십진수로 변환하는 방법을 설명할 수 있는지 궁금합니다.Pekka의 답변은 사실 정확하며 아마도 이 질문에 대해 생각하는 가장 좋은 방법일 것입니다.
그러나 이미 많은 사람들이 지적했듯이 W3C CSS 권장 사항에는 "큰 진수 시스템에서 세 숫자 a-b-c를 연결하면 구체성이 제공됩니다." 따라서 내 안의 괴짜는 이 밑수가 얼마나 큰지 알아내야 합니다.
이 표준 알고리즘을 구현하는 "매우 큰 기반"(가장 일반적으로 사용되는 브라우저 중 최소 4개 *)은 256 또는 28인 것으로 나타났습니다.
이는 0개의 ID와 256개의 클래스 이름으로 지정된 스타일이 1개의 ID로 지정된 스타일을 재정의한다는 의미입니다. 나는 그것을 몇 가지 바이올린으로 테스트했습니다:
클래스 이름 255개로는 ID 1개를 커버할 수 없습니다
...하지만 클래스 이름 256개면 ID 1개를 덮기에 충분합니다
...그리고 256개의 태그 이름은 클래스 이름 1개를 덮기에 충분합니다
...하지만 안타깝게도 256개의 ID로는 인라인 스타일 1개를 처리하기에는 충분하지 않습니다. (2012/8/15에 업데이트됨 - 사용해야 합니다
!important)실제로는 "포인트 시스템"이 있는데, 10진법이 아닌 256진법을 기반으로 하고 있습니다. 작동 방식은 다음과 같습니다.
(28)2 또는 65536, 선택기의 ID 수
를 곱한 값간단한 컨셉의 커뮤니케이션에는 그다지 실용적이지 않습니다.
이것이 아마도 이 주제에 관한 기사가 항상 10진수 기반 시스템을 사용한 이유일 것입니다.
***** [Opera는 216을 사용합니다(karlcow의 댓글 참조). 일부 다른 선택기 엔진은 infinity를 사용합니다. 사실상 포인트 시스템이 없습니다(Simon Sapin의 의견 참조). ]
업데이트됨, 2014년 7월:
Blazemonger가 올해 초 지적했듯이 웹킷 브라우저(Chrome, Safari)는 이제 256보다 높은 기반을 사용하는 것으로 보입니다. 아마 216, 오페라처럼? IE와 Firefox는 여전히 256을 사용합니다.
업데이트 날짜: 2021년 3월:
Firefox는 더 이상 256을 기본으로 사용하지 않습니다.