為什麼類別選擇器會覆蓋 CSS 中的連結偽類樣式？

為什麼 .foo 選擇器會覆蓋連結樣式規格？

CSS 根據特異性規則套用樣式。在範例程式碼中，我們定義具有相同特異性的連結、已存取、懸停和活動狀態 (0 0 1 1)。然而，.foo 選擇器引入了一個具有稍高特異性的附加類別 (0 0 2 1)。

覆蓋機制

當具有不同特異性等級的多重選擇器應用於相同的元素，具有最高特異性的選擇器會覆蓋較低特異性的選擇器。這裡，.foo a:link 和 .foo a:visited 比 a:hover 和 a:active 具有更高的特異性。

因此，.foo 選擇器會覆蓋連結和動態偽類選擇器，導致連結無論應用其他樣式如何，.foo 類別都會顯示為綠色。

可能修復

為了確保懸停狀態覆蓋.foo 選擇器，可以：

1. 透過增加另一個類別來提高 .foo 選擇器的特異性。例如：

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

   登入後複製
   這確保 .link 類別覆蓋 .foo 選擇器，從而允許懸停狀態生效。

2. 使用!重要聲明

   使用以下命令強制連結和懸停樣式覆蓋.foo 選擇器!重要聲明：

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

   登入後複製
   這有效地「鎖定」了顏色屬性，防止其他選擇器修改它。

以上是為什麼類別選擇器會覆蓋 CSS 中的連結偽類樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！