為什麼我的 `.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，您可以增加後者的特異性。這可以透過向懸停/活動規則添加子選擇器來實現：

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

透過添加.foo 類別作為子選擇器，懸停/活動規則的特異性增加到0-0- 3 -1，高於.foo a:link 和.foo a:visited。因此，當兩個偽類都適用時，懸停/活動樣式將優先於連結/存取樣式並生效。

以上是為什麼我的 `.foo a:link` 和 `.foo a:visited` CSS 會覆寫 `a:hover` 和 `a:active`？的詳細內容。更多資訊請關注PHP中文網其他相關文章！