CSS 특이성에서 `.foo a:link`가 `a:hover`를 재정의하는 이유는 무엇입니까?

CSS 선택기 특이성 퍼즐: .foo a:link가 a:hover를 재정의하는 이유

CSS 영역에서 선택기 특이성은 다소 혼란스러울 수 있습니다. . .foo a:link 선택기가 보다 구체적인 a:hover 및 a:active 선택기를 어떻게 재정의할 수 있는지 보여주는 흥미로운 퍼즐을 살펴보겠습니다.

문제 정의

다음 코드를 고려하세요.

<div class="foo">
    <a href="#">Example</a>
</div>

a:link, a:visited {
    color: blue;
}

a:hover, a:active {
    color: red; 
}

.foo a:link, .foo a:visited {
    color: green;
}

링크 위로 마우스를 가져가면 빨간색으로 바뀔 것으로 예상되지만, 대신 그대로 남아 있습니다. 녹색. 이 수수께끼 같은 동작을 위해서는 CSS 캐스케이드를 자세히 조사해야 합니다.

CSS의 특수성

특이성은 CSS 규칙이 요소에 적용되는 순서를 결정합니다. 더 높은 특이성이 더 낮은 특이성을 이깁니다. 다음 수식은 구체성을 계산합니다.

• 인라인 스타일: 1, 0, 0, 0
• ID 선택기: 0, 1, 0, 0
• 클래스 선택기: 0, 0, 1, 0
• 의사 클래스 및 의사 요소: 0, 0, 0, 1

퍼즐의 선택기 특이성

선택기의 특이성 계산:

• a:link , a:방문함, a:hover, a:활성: 0, 0, 1, 1
• .foo a:link, .foo a:visited: 0, 0, 2, 1

보시다시피 .foo a:link 및 .foo a :visited 선택기는 a:hover 및 a:active 선택기(2 > 1).

결론

놀라운 동작의 이유는 .foo a:link 및 .foo a:visited 선택기가 a:hover 및 a:active보다 더 높은 특이도를 갖기 때문입니다. 선택자. 이는 a:hover 및 a:active가 의사 클래스 측면에서 더 구체적이더라도 .foo 선택기의 클래스 특이성이 우선한다는 것을 의미합니다.

이 문제를 해결하려면 문제에 제안된 수정 사항( .foo a:hover 및 .foo a:active 규칙의 주석 처리를 제거해야 합니다. .foo a:link 및 .foo a:visited 규칙과 동일한 구체성을 가진 이러한 규칙을 추가하면 이제 a:hover 및 a:active 스타일이 우선 적용됩니다.

위 내용은 CSS 특이성에서 `.foo a:link`가 `a:hover`를 재정의하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!