> 웹 프론트엔드 > CSS 튜토리얼 > 클래스 및 의사 클래스 CSS 선택자가 호버에서 의사 클래스 전용 선택자를 재정의하는 이유는 무엇입니까?

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

Patricia Arquette
풀어 주다: 2024-12-04 02:21:11
원래의
363명이 탐색했습니다.

Why Do Class and Pseudo-class CSS Selectors Override Pseudo-class-Only Selectors on Hover?

특정성이 더 높은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿