為什麼類別和偽類 CSS 選擇器在懸停時會覆蓋僅偽類選擇器？

為什麼具有較高特異性的CSS 選擇器會覆蓋其他選擇器：懸停時連結外觀的情況

簡介

在CSS中，當多個選擇器應用於同一個元素時，具有最高值的選擇器特異性優先。這個原則在下面的範例中很明顯，其中同時使用類別和偽類別的選擇器 (.foo a:link) 會覆寫其他僅使用偽類別的選擇器（例如 a:hover）。

了解特異性

要確定哪個選擇器具有最高的特異性，請考慮以下因素指標：

• 內聯樣式具有最高的特異性(1)
• Id 選擇器比類別、元素或通用選擇器具有更高的特異性(0)
• 類，元素或通用選擇器具有相同的特異性(1)

解釋範例

在給定的HTML 和CSS 程式碼中，以下選擇器應用於.foo div內的連結元素：

• .foo a:link, .foo a:visited（較高特異性：類別和偽類）
• a:link, a:visited（較低特異性：僅偽類）
• a:hover, a:active（與.foo a:link相同的特異性）

根據提供的特異性表，.foo a:link 覆蓋 a :hover 因為前者由於包含類別而具有更高的優先權。

修復問題

要修正該問題並使懸停連結顯示為紅色，需要修改.foo a:link 選擇器以確保它不會覆蓋a: hover 中定義的樣式。一種可能的修復方法是為.foo 上下文中的懸停添加一個更具體的選擇器：

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

通過引入更具體的選擇器，它優先於不太具體的.foo a :link 選擇器，從而允許懸停行為以顯示正確的顏色。

以上是為什麼類別和偽類 CSS 選擇器在懸停時會覆蓋僅偽類選擇器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！