[css] CSS 특이성의 포인트는 어떻게 계산됩니까?

Program / 글쓴이

특이도를 검토 한 결과 내가이 블로그를 우연히 – http://www.htmldog.com/guides/cssadvanced/specificity/

특이성은 CSS에 대한 점수 시스템이라고 말합니다. 요소는 1 점, 클래스는 10 점, ID는 100 점을 의미합니다. 또한 이러한 포인트가 합산되고 전체 금액이 해당 선택 자의 특이성이라고 말합니다.

예를 들면 :

body = 1 포인트
body .wrapper = 11 포인트
body .wrapper #container = 111 포인트

따라서 이러한 점을 사용하면 다음 CSS 및 HTML이 텍스트가 파란색이 될 것으로 예상합니다. 

#a {
    color: red;
}

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
  color: blue;
}
<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">
                              This should be blue.
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

스 니펫 확장

15 개의 클래스가 150 포인트와 같을 때 텍스트가 빨간색으로 표시되는 이유는 100 포인트에 해당하는 1 개의 ID와 비교할 때?

분명히 점수는 합산 된 것이 아닙니다. 그들은 연결되어 있습니다. 여기에서 자세한 내용을 읽어보십시오-http: //www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

그것은 우리 선택기의 클래스 = 0,0,15,0OR 을 의미합니까 0,1,5,0?

(내 본능은 ID 선택 자의 특이성이 다음과 같은 것을 알고 있기 때문에 전자라고 말합니다. 0,1,0,0)

답변

Pekka의 대답 은 실제로 정확하며 아마도 문제를 생각하는 가장 좋은 방법 일 것입니다.

그러나 많은 사람들이 이미 지적했듯이 W3C CSS 권장 사항에 따르면 “세 개의 숫자 abc (대기 수가 큰 숫자 체계에서)를 연결하면 특이성이 제공됩니다.” 그래서 내 괴짜는이 기지가 얼마나 큰지 알아 내야 만했습니다.

이 표준 알고리즘을 구현하기 위해 사용 된 “매우 큰 기반”(적어도 4 개의 가장 일반적으로 사용되는 브라우저 * )은 256 또는 2 8 입니다.

이것이 의미하는 것은 0 ID와 256 클래스 이름으로 지정된 스타일이 있다는 것입니다 것입니다 단지 1 ID로 지정된 스타일을 오버 타고. 나는 이것을 몇 가지 바이올린으로 테스트했습니다.

따라서 사실상 “포인트 시스템”이 있지만 10 진법이 아닙니다. 256 진법입니다. 작동 방식은 다음과 같습니다.

(2 8 ) 2 또는 65536, 선택기의 ID 수
+ (2 8 ) 1 또는 256, 선택기의 클래스 이름 수
+ (2 8 ) 0 또는 1, 태그 수- 선택기의 이름

이것은 개념을 전달하기위한 봉투 뒤 연습에서는 그리 실용적이지 않습니다.
이것이 주제에 대한 기사가 10 진법을 사용하는 이유 일 것입니다.

***** [Opera는 2 16을 사용합니다 (karlcow의 의견 참조). 일부 다른 선택기 엔진은 무한대를 사용 합니다 . 사실상 점수 없음 시스템 (Simon Sapin의 의견 참조)

업데이트, 2014 년 7 월 :
Blazemonger가 연초에 지적했듯이 웹킷 브라우저 (크롬, 사파리)는 이제 256보다 높은베이스를 사용하는 것으로 보입니다. 아마도 2 16 , Opera처럼? IE와 Firefox는 여전히 256을 사용합니다.

답변

좋은 질문.

확실히 말할 수는 없습니다. 내가 찾은 모든 기사는 여러 클래스의 예를 피하는 것입니다 (예 : 여기) .하지만 클래스 선택기와 ID 간의 특수성을 비교할 때 클래스가 다음과 같이 계산 된다고 가정합니다 . 15아무리 상세해도 가치 가 있습니다.

그것은 특이성이 어떻게 작용하는지에 대한 나의 경험과 일치합니다.

그러나 클래스 스택 이 있어야합니다.

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o

보다 구체적입니다

.o

내가 가진 유일한 설명은 스택 클래스의 특이성이 서로에 대해서만 계산되지만 ID에 대해서는 계산되지 않는다는 것입니다.

업데이트 : 반쯤 얻었습니다. 포인트 시스템이 아니며, 15 점의 등급에 대한 정보가 잘못되었습니다. 이것은 여기에서 매우 잘 설명 된 4 부분 번호 체계 입니다.

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

style  id   class element
0,     0,   0,    0

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

#a            0,1,0,0    = 100
classes       0,0,15,0   = ... see the comments

이것은 매우 큰 (정의되지 않은?)베이스를 가진 번호 체계입니다.

내 이해는 밑 수가 매우 크기 때문에 4 열의 숫자는 3 열의 숫자> 0을 이길 수 없으며 2 열, 1 열 …. 이것이 맞습니까?

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

답변

현재 Selectors Level 4 Working Draft 는 CSS의 특이성을 잘 설명합니다.

특이성은 세 가지 구성 요소를 순서대로 비교하여 비교됩니다. A 값이 큰 특이성은 더 구체적입니다. 두 A 값이 동률이면 B 값이 더 큰 특이성이 더 구체적입니다. 두 B 값이 또한 동률이면 c 값이 더 큰 특이성이 더 구체적입니다. 모든 값이 동률이면 두 종은 동일합니다.

이는 A, B 및 C 값이 서로 완전히 독립적임을 의미합니다.

15 개의 클래스는 선택자에게 150의 특이성 점수를 제공하지 않고 B 값 15를 제공합니다 . 단일 A 값은이를 압도하기에 충분합니다.

비유로서, 1 명의 조부모, 1 명의 부모 및 1 명의 자녀의 가족을 상상하십시오. 이것은 1,1,1 로 표현 될 수 있습니다 . 부모에게 15 명의 자녀가 있다고해서 갑자기 다른 부모가되는 것은 아닙니다 ( 1,2,0 ). 이는 부모가 단 한 명의 자녀 ( 1,1,15 )에 가졌던 것보다 훨씬 더 많은 책임을 가지고 있음을 의미합니다 . 😉

동일한 문서도 다음과 같이 말합니다.

스토리지 제한으로 인해 구현시 A , B 또는 c 의 크기에 제한이있을 수 있습니다 . 그렇다면 제한보다 높은 값은 오버플로가 아닌 해당 제한에 고정되어야합니다.

이것은 Faust의 답변에 제시된 문제를 해결하기 위해 추가되었습니다 . 2012 년의 CSS 구현으로 인해 특이성 값이 서로 넘칠 수있었습니다.

2012 년에는 대부분의 브라우저에서 255 개 제한을 구현했지만이 제한은 오버플로가 허용되었습니다. 255 개의 클래스는 0,255,0 의 A, B, c 특이성 점수를 받았지만 256 개의 클래스는 오버플로되었고 A, B, c 점수는 1,0,0 이었습니다. 갑자기 B 값이 A 값 이되었습니다 . 선택기 레벨 4 문서는 한계가 절대로 넘칠 수 없음을 명시함으로써 그 문제를 완전히 조사합니다. 이 구현에서는 255 및 256 클래스 모두 0,255,0 의 동일한 A, B, c 점수를 갖게 됩니다.

Faust의 답변에 주어진 문제는 이후 대부분의 최신 브라우저에서 수정 되었습니다 .

답변

저는 현재 CSS Mastery : Advanced Web Standards Solutions 책을 사용하고 있습니다.

1 장, 16 페이지 내용 :

규칙이 얼마나 구체적인지를 계산하기 위해 각 선택기 유형에 숫자 값이 할당됩니다. 그런 다음 각 선택기의 값을 더하여 규칙의 특이성을 계산합니다. 불행히도 특이성은 10 진법이 아니라 높은, 불특정 한 염기수로 계산됩니다. 이것은 ID 선택기와 같은 매우 구체적인 선택자가 유형 선택기와 같이 덜 구체적인 선택기에 의해 재정의되지 않도록하기위한 것입니다.

(강조 내) 및

선택 자의 특이성은 a, b, c, d의 네 가지 구성 수준으로 나뉩니다.

  • 스타일이 인라인 스타일이면 a = 1
  • b = 총 id 선택자 수
  • c = 클래스, 의사 클래스 및 속성 선택 자의 수
  • d = 유형 선택자 및 의사 요소 선택 자의 수

계속해서 10 진법으로 계산을 할 수 있지만 모든 열의 값이 10 미만인 경우에만 계산할 수 있습니다.

귀하의 예에서 ID는 100 점의 가치가 없습니다. 각각은 [0, 1, 0, 0]포인트 가치가 있습니다. 따라서 하나의 ID가 높은 기본 숫자 시스템 [0, 1, 0, 0]보다 크기 때문에 15 개의 클래스를 능가 [0, 0, 15, 0]합니다.

답변

특이성 순위를 올림픽 메달 테이블과 비교하는 것을 좋아합니다 (금메달 수를 기준으로 한 첫 번째 방법, 은메달, 동메달 순).

그것은 또한 당신의 질문과 함께 작동합니다 (하나의 특이성 그룹에서 엄청난 수의 선택자). 특이성은 각 그룹을 개별적으로 고려했습니다. 실제로는 12 개 이상의 선택자가있는 경우를 거의 본 적이 없습니다.)

가능 꽤 좋은 특이성 계산기도있다 여기가 . 여기에 예제 (#a 및 .a .b .c .d .e .f .g .h .i .j .k .l .m .n .o)를 넣고 결과를 볼 수 있습니다.

2016 리우 올림픽 메달 테이블의 예는 다음과 같습니다.
여기에 이미지 설명 입력

답변

나는 블로그의 설명이 정확하다고 생각하지 않습니다. 사양은 다음과 같습니다.

http://www.w3.org/TR/CSS2/cascade.html#specificity

클래스 선택기의 “포인트”는 “ID”선택자보다 더 중요 할 수 없습니다. 그렇게 작동하지 않습니다.

답변

나는 이렇게 말할 것이다:

Element < Class < ID

나는 그것이 같은 것의 배수라면 당신이 얻는 것에 따라 쌓일 것이라고 생각합니다. 따라서 클래스는 항상 클래스 위에있는 요소와 ID를 덮어 쓰지만 4 개의 요소 중 3이 파란색이고 1이 빨간색 인 경우 파란색이됩니다.

예를 들면 :

.a .b .c .d .e .f .g .h .i .j .k .l
{
color: red;
}

 .m .n .o
{
color blue;
}

빨간색으로 표시되어야합니다.

예 http://jsfiddle.net/RWFWq/ 참조

“5 개가 빨간색이고 3 개가 파란색이면 잘 붉어 지겠지”