CSS 특이성은 어떻게 계산되나요?

Question

특이성을 조사하던 중 우연히 다음 블로그를 발견했습니다. http://www.htmldog.com/guides/cssadvanced/특이성/

특이성은 CSS의 채점 시스템이라고 명시되어 있습니다. 요소값은 1포인트, 클래스값은 10포인트, ID값은 100포인트임을 알려줍니다. 계속해서 이러한 점수를 합산하여 총 점수가 선택자의 특이성이라고 말합니다.

예: <인용문>

body = 1포인트

body .wrapper = 11포인트

body .wrapper #container = 111포인트

따라서 이 점수를 사용하면 다음 CSS와 HTML로 인해 텍스트가 파란색으로 바뀔 것으로 예상됩니다.

#a {
    색상: 빨간색;
}

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
  파란색;
}

<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>

15개의 클래스가 150포인트이고 1개의 ID가 100포인트인 경우 텍스트가 빨간색인 이유는 무엇인가요?

분명히 이러한 점수는 단순히 연결되어 있는 것이 아닙니다. 자세한 내용은 여기에서 확인하세요 - http://www.stuffandnonsense.co.uk/archives/css_특이적_wars.html

이것은 선택기 = 0,0,15,0 또는 0,1,5,0의 클래스를 의미합니까?

(내 직관으로는 전자여야 한다고 생각합니다. 왜냐하면 ID 선택자의 특수성이 다음과 같다는 것을 알고 있기 때문입니다: 0,1,0,0)

Answer 1

좋은 질문입니다.

잘 모르겠습니다. 제가 찾은 모든 기사는 여기와 같은 여러 클래스의 예를 피합니다. 하지만 클래스 선택기와 ID 간의 특이성을 비교할 때 클래스는 아무리 상세해도 A 값으로만 ​​평가됩니다. 15

이것은 특정 성적 행동에 대한 나의 경험과 일치합니다.

그러나

반드시 수업을 쌓아야 합니다. 왜냐하면 으아악

더 좋음

으아악

좀 더 구체적으로 설명하자면, 스택 클래스의 구체성은 ID가 아닌 서로에 대해서만 계산된다는 것입니다.

UPDATE: 이제 어느 정도 이해가 되네요. 이것은 점수 시스템이 아니며 클래스 가중치가 15점이라는 정보가 올바르지 않습니다. 이것은 여기에서 찾을 수 있는 매우 잘 설명된 4개 부품 번호 지정 시스템입니다.

시작점은 4개의 숫자입니다:

으아악

W3C의 특이성에 대한 설명에 따르면 위 규칙의 특이성 값은 다음과 같습니다. 으아악

이것은 매우 큰(정의되지 않은?) 기반의 번호 매기기 시스템입니다.

제가 이해한 바에 따르면 밑수가 매우 크기 때문에 4열의 어떤 숫자도 3열의 0보다 큰 숫자를 이길 수 없으며, 2열의 경우도 마찬가지이고 1열의 경우도 마찬가지입니다.... 이게 맞나요? 이해가 맞나요?

수학을 더 잘 이해하는 사람이 이 번호 매기기 체계와 개별 요소가 9보다 큰 경우 이를 십진수로 변환하는 방법을 설명할 수 있는지 궁금합니다.

Answer 2

Pekka의 답변은 사실 정확하며 아마도 이 질문에 대해 생각하는 가장 좋은 방법일 것입니다.

그러나 이미 많은 사람들이 지적했듯이 W3C CSS 권장 사항에는 "큰 진수 시스템에서 세 숫자 a-b-c를 연결하면 구체성이 제공됩니다." 따라서 내 안의 괴짜는 이 밑수가 얼마나 큰지 알아내야 합니다.

이 표준 알고리즘을 구현하는 "매우 큰 기반"(가장 일반적으로 사용되는 브라우저 중 최소 4개 ^*)은 256 또는 2⁸인 것으로 나타났습니다.

이는 0개의 ID와 256개의 클래스 이름으로 지정된 스타일이 1개의 ID로 지정된 스타일을 재정의한다는 의미입니다. 나는 그것을 몇 가지 바이올린으로 테스트했습니다:

• 클래스 이름 255개로는 ID 1개를 커버할 수 없습니다

• ...하지만 클래스 이름 256개면 ID 1개를 덮기에 충분합니다

• ...그리고 256개의 태그 이름은 클래스 이름 1개를 덮기에 충분합니다

• ...하지만 안타깝게도 256개의 ID로는 인라인 스타일 1개를 처리하기에는 충분하지 않습니다. (2012/8/15에 업데이트됨 - 사용해야 합니다 !important)

실제로는 "포인트 시스템"이 있는데, 10진법이 아닌 256진법을 기반으로 하고 있습니다. 작동 방식은 다음과 같습니다.

(2⁸)² 또는 65536, 선택기의 ID 수

를 곱한 값

• (2⁸)¹ 또는 256에 선택기의 클래스 이름 수를 곱합니다
• (2⁸)⁰ 또는 1, 선택기의 태그 이름 수를 곱함

간단한 컨셉의 커뮤니케이션에는 그다지 실용적이지 않습니다.
이것이 아마도 이 주제에 관한 기사가 항상 10진수 기반 시스템을 사용한 이유일 것입니다.

***** [Opera는 2¹⁶을 사용합니다(karlcow의 댓글 참조). 일부 다른 선택기 엔진은 infinity를 사용합니다. 사실상 포인트 시스템이 없습니다(Simon Sapin의 의견 참조). ]

업데이트됨, 2014년 7월:
Blazemonger가 올해 초 지적했듯이 웹킷 브라우저(Chrome, Safari)는 이제 256보다 높은 기반을 사용하는 것으로 보입니다. 아마 2¹⁶, 오페라처럼? IE와 Firefox는 여전히 256을 사용합니다.

업데이트 날짜: 2021년 3월:
Firefox는 더 이상 256을 기본으로 사용하지 않습니다.