為什麼 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中文網其他相關文章！
