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

특정성 수수께끼: .foo a 선택기가 a:hover, a:active

CSS 특이성은 선택기에 따라 스타일이 적용되는 방식을 결정합니다. 무게. 주어진 문제에서 .foo a 선택기는 a:hover 및 a:active와 충돌합니다.

특정성 이해

특정성은 태그, 클래스 수에 따라 결정됩니다. , 선택기의 ID. 각 수준은 특정 가중치를 갖습니다. 이 경우 제공된 특이성 표를 보면 .foo a:link 및 .foo a:visited가 a:hover 및 a:active(0 0 1 1)보다 특이도(0 0 2 1)가 더 높다는 것을 알 수 있습니다.

.foo a가 재정의되는 이유

.foo a 선택기가 더 구체적입니다. a:hover 및 a:active보다 foo 클래스가 있는 요소 내의 링크에 적용되기 때문입니다. 요소가 동일한 특이성을 가진 여러 선택기를 만나면 마지막으로 선언된 스타일이 적용됩니다.

.foo 선택기 수정

a:hover 및 a:를 허용하려면 활성 스타일이 우선순위를 가지려면 .foo a 선택기가 더 낮은 특정성을 갖도록 수정되어야 합니다. 한 가지 가능한 수정 사항은 다음과 같습니다.

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

hover 및 활성 의사 클래스 앞에 .foo를 추가하면 특정성이 a:hover 및 a:active보다 높게 유지되어 해당 의사 클래스의 스타일이 다음과 같이 유지됩니다. foo가 있는 요소 내에 적용됨 class.

요점

특수성은 CSS 스타일이 적용되는 방식을 결정합니다. 스타일 우선순위를 제어하고 원하는 시각적 효과를 얻으려면 이 개념을 이해하는 것이 중요합니다.

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