為什麼 CSS 特異性中的 `.foo a:link` 會覆寫 `a:hover` ？

CSS 選擇器特異性難題：為什麼 .foo a:link 會覆蓋 a:hover

在 CSS 領域，選擇器特異性可能有點令人費解。讓我們深入研究一個有趣的謎題，它演示了 .foo a:link 選擇器如何覆蓋更具體的 a:hover 和 a:active 選擇器。

問題定義

考慮以下程式碼：

<div class="foo">
    <a href="#">Example</a>
</div>

a:link, a:visited {
    color: blue;
}

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

.foo a:link, .foo a:visited {
    color: green;
}

預期將滑鼠懸停在連結上應將其變為紅色，但實際上，它仍保持綠色。這種令人費解的行為需要仔細檢查 CSS 級聯。

CSS 的特異性

特異性決定了 CSS 規則應用於元素的順序。較高的特異性勝過較低的特異性。以下公式計算特異性：

• 內聯樣式：1, 0, 0, 0
• ID 選擇器：0, 1, 0, 0
• 類選擇器： 0, 0, 1, 0
• 偽類與偽元素：0, 0, 0, 1

拼圖中的選擇器特異性

計算選擇器的特異性：

• a:link , a:已存取, a:懸停, a:活動: 0, 0, 1, 1
• .foo a:link, .foo a:visited: 0, 0, 2, 1

如您所見，.foo a:link 和.foo a :visited 選擇器比a:hover 和a:active 選擇器具有更高的特異性(2 > > 1).

結論

令人驚訝的行為的原因是.foo a:link 和 .foo a:visited 選擇器比 a:hover 和 a:active 具有更高的特異性選擇器。這意味著即使 a:hover 和 a:active 在偽類方面更具體，.foo 選擇器的類別特異性勝出。

要修正此問題，請使用問題中建議的修復（取消註解 .foo a:hover 和 .foo a:active 規則）是必要的。透過新增與 .foo a:link 和 .foo a:visited 規則具有相同特異性的這些規則，a:hover 和 a:active 樣式現在將優先。

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