클래스 및 의사 클래스 CSS 선택자가 호버에서 의사 클래스 전용 선택자를 재정의하는 이유는 무엇입니까?

특정성이 더 높은 CSS 선택자가 다른 선택자를 재정의하는 이유: 호버에 링크가 나타나는 경우

소개

CSS에서 여러 선택기가 동일한 요소에 적용될 때 가장 높은 선택기가 적용됩니다. 특정성이 우선합니다. 이 원칙은 클래스와 의사 클래스(.foo a:link)를 모두 사용하는 선택기가 의사 클래스만 사용하는 다른 선택기(예: a:hover)를 재정의하는 아래 예에서 분명하게 드러납니다.

특이성 이해

특이도가 가장 높은 선택기를 결정하려면 다음을 고려하세요. 측정 항목:

• 인라인 스타일의 특이성이 가장 높습니다(1)
• ID 선택기가 클래스, 요소 또는 범용 선택기보다 특이성이 높습니다(0)
• 클래스, 요소 또는 범용 선택자가 동일한 특이성을 갖습니다. (1)

설명 예제

주어진 HTML 및 CSS 코드에서 다음 선택기는 .foo div 내의 링크 요소에 적용됩니다:

• .foo a:link, .foo a:visited(더 높은 특이성: 클래스 및 의사 클래스)
• a:link, a:visited(낮은 특이성: 의사 클래스만)
• a:hover, a:active(.foo a:link와 동일한 특이성)

제공된 특이성 테이블을 기반으로 .foo a: 링크는 a:hover를 포함하기 때문에 전자의 우선순위가 더 높기 때문에 a:hover를 재정의합니다. class.

문제 해결

문제를 수정하고 마우스를 올린 링크가 빨간색으로 표시되도록 하려면 .foo a:link 선택기를 수정하여 빨간색으로 표시되도록 해야 합니다. a:hover에 정의된 스타일을 재정의하지 마세요. 한 가지 가능한 수정 방법은 .foo 컨텍스트 내에서 마우스를 올리기 위한 보다 구체적인 선택기를 추가하는 것입니다.

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

보다 구체적인 선택기를 도입하면 덜 구체적인 .foo a:link 선택기보다 우선순위가 높아집니다. 올바른 색상을 표시하기 위한 마우스 오버 동작입니다.

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