왜 : 링크 의사 클래스 브레이크 예상 CSS 특이성 규칙은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/1804081

  •  05-07-2019
  •  | 
  •  

문제

내 이해에 CSS 특이성 규칙 의사 클래스는 태그 선택기와 동일한 무게를 가지고 있음을 나타냅니다. 따라서 "div pa"와 같은 선택기는 "a : 링크"보다 더 구체적입니다.

그러나 다음 테스트 사례에서 알 수 있듯이 그렇지 않은 것 같습니다. 링크가 빨간색 인 이유는 무엇입니까?

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">

    <style type="text/css" media="screen">
        a:link { color: red; }
        div p a { color: green; }
        div.foobar p a { color: green; }
    </style>
</head>
<body>
    <div>
        <p>
          <a href="http://somecrazyurlwierdthing.com">A link... why is it red?</a>  
        </p>
    </div>

    <div class="foobar">
        <p>
          <a href="http://somecrazyurlwierdthing.com">But it turns green when you add a class selector.</a>  
        </p>
    </div>
</body>
</html>

"div.foobar pa"선택기를 포함하도록 예제를 편집했습니다.

도움이 되었습니까?

해결책

당신이 연결하는 사양은 의사 클래스라고 말합니다 (:link 이 경우)는 요소 이름보다 특이성이 높습니다. 정확하게 말하면 ABCD 형식을 사용하여 3 개의 선택기가 다음과 같이 나옵니다.

a-b-c-d
0 0 1 1
0 0 0 3
0 0 1 3

당신의 혼란은 가능한 "의사 선택기"라는 용어를 사용하여 발생합니다. :link 및와 같은 의사 요소 :first-line.

다른 팁

문제는입니다 :link 의사 요소가 아닙니다 :first-line, 그것은 의사 급이므로 특이성의 클래스로 간주됩니다.

원천

각각의 특이성 :

A : 링크 0,0,1,1

Div PA 0,0,0,3

A : 링크가 승리합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top