내 `.foo a:link` 및 `.foo a:visited` CSS가 `a:hover` 및 `a:active`를 재정의하는 이유는 무엇입니까?

CSS에서 .foo a:link, .foo a:visited 선택기가 a:hover, a:active 선택기를 재정의하는 이유는 무엇입니까?

질문에 설명된 예상치 못한 동작은 CSS의 특수성 규칙에서 발생합니다. 동일한 요소에 여러 규칙이 적용될 때 구체성은 CSS 규칙의 우선 순위를 결정합니다.

특수성 표:

Selector	Specificity
a:link	0-0-1-1
a:visited	0-0-1-1
a:hover	0-0-1-1
a:active	0-0-1-1
.foo a:link	0-0-2-1
.foo a:visited	0-0-2-1

보시다시피 .foo a:link 및 .foo a:visited는 추가 클래스 선택기로 인해 a:hover 및 a:active보다 특이도가 약간 더 높습니다. .foo.

특정성 재정의 작동 방식:

특정성이 다른 여러 규칙이 동일한 요소에 적용되는 경우 특이성이 더 높은 규칙이 우선 적용됩니다. 이 경우 .foo a:link 및 .foo a:visited는 a:hover 및 a:active보다 특이성이 높으므로 해당 스타일이 후자의 스타일보다 우선합니다.

동작 수정:

.foo a:link, .foo a:visited 선택기가 재정의되는 것을 방지하려면 a:hover, a:active, 후자의 특이성을 높일 수 있습니다. hover/active 규칙에 하위 선택기를 추가하면 이를 달성할 수 있습니다.

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

.foo 클래스를 하위 선택기로 추가하면 hover/active 규칙의 구체성이 0-0-으로 증가합니다. 3-1, 이는 .foo a:link 및 .foo a:visited보다 높습니다. 결과적으로 두 가상 클래스를 모두 적용할 수 있는 경우 hover/active 스타일이 링크/방문 스타일보다 우선적으로 적용됩니다.

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