為什麼 `.foo a` 會覆蓋 CSS 特異性中的 `a:hover` 和 `a:active` ？

特異性難題：為什麼.foo 選擇器會否決a:hover、a:active

CSS 特異性決定瞭如何根據選擇器套用樣式重量。在給定的問題中，.foo a 選擇器與 a:hover 和 a:active 衝突。

理解特異性

特異性由標籤、類別的數量決定，以及選擇器中的 ID，每個等級都有特定的權重。在這種情況下，提供的特異性表顯示 .foo a:link 和 .foo a:visited 比 a:hover 和 a:active (0 0 1 1) 具有更高的特異性 (0 0 2 1)。

為什麼.foo a 會被覆蓋

.foo a 選擇器比a:hover 更具體和a:active 因為它適用於具有foo 類的元素內的連結。當一個元素遇到具有相同特性的多個選擇器時，將會套用最後聲明的樣式。

更正.foo 選擇器

以允許a:hover 和a:要優先使用活動樣式，必須修改.foo a 選擇器以具有較低的特異性。一個可能的修復方法是：

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

透過在懸停和活動偽類之前添加.foo，特異性仍然高於a:hover 和a:active，確保這些偽類的樣式是應用於具有foo 類別的元素內。

外帶

特異性決定如何套用 CSS 樣式。理解這個概念對於控制風格優先順序和實現所需的視覺效果至關重要。

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