클래스 선택기가 CSS의 링크 의사 클래스 스타일을 재정의하는 이유는 무엇입니까?

.foo 선택기가 링크 스타일 사양을 재정의하는 이유는 무엇입니까?

CSS는 특정성 규칙에 따라 스타일을 적용합니다. 샘플 코드에서는 동일한 특이성(0 0 1 1)으로 링크, 방문, 마우스 오버 및 활성 상태를 정의합니다. 그러나 .foo 선택기는 특이도가 약간 더 높은 추가 클래스(0 0 2 1)를 도입합니다.

재정의 메커니즘

특이성 수준이 서로 다른 여러 선택기가 적용되는 경우 동일한 요소에서는 특이도가 가장 높은 선택자가 특이도가 낮은 선택자를 재정의합니다. 여기서 .foo a:link 및 .foo a:visited는 a:hover 및 a:active보다 더 높은 특이성을 갖습니다.

따라서 .foo 선택기는 링크 및 동적 의사 클래스 선택기를 재정의하여 다음과 같은 링크를 생성합니다. 적용된 다른 스타일에 관계없이 .foo 클래스가 녹색으로 표시됩니다.

가능 수정

호버 상태가 .foo 선택기를 재정의하도록 하려면 다음을 수행할 수 있습니다.

1. 더 구체적인 .foo 선택기 추가

   다른 클래스를 추가하여 .foo 선택기의 특이성을 높이세요. 예:

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

   이렇게 하면 .link 클래스가 .foo 선택기를 재정의하여 마우스 오버 상태가 적용됩니다.

2. !중요 선언

   링크 및 호버 스타일이 .important 선언을 사용하는 .foo 선택기:

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

   이것은 색상 속성을 효과적으로 "잠금"하여 다른 선택기가 이를 수정하는 것을 방지합니다.

위 내용은 클래스 선택기가 CSS의 링크 의사 클래스 스타일을 재정의하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!