왜 : 링크 의사 클래스 브레이크 예상 CSS 특이성 규칙은 무엇입니까?
-
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 : 링크가 승리합니다.
제휴하지 않습니다 StackOverflow