如何設定連結樣式而不在其中的特定元素下劃線？

設定連結樣式而不突出顯示特定元素

使用 CSS 設定連結樣式時，可能會遇到無法刪除連結內特定元素下劃線的問題。例如，當您只想突出顯示連結的一部分時，這可能會令人沮喪。

問題說明

在提供的程式碼片段中：

a {
  text-decoration: underline;
}

a #myspan {
  color: black;
  text-decoration: none;
}

The目標是使除ID 為#myspan 的元素之外的所有連結都帶有下劃線。然而，儘管設定了 text-decoration: none;在#myspan 上，它仍然帶有下劃線。原因是 CSS 優先權規則賦予父選擇器 (a) 比更具體的選擇器 (a #myspan) 更高的優先權。因此， a 的下劃線會覆蓋文字修飾：none；

解決方案

要解決這個問題，我們可以將#myspan的顯示屬性更改為內聯區塊：

a #myspan {
  color: black;
  display: inline-block;
}

透過使#myspan對於inline-block 元素，我們刪除它與a 元素有關文字修飾的關係。因此，底線將不會應用於#myspan。

以上是如何設定連結樣式而不在其中的特定元素下劃線？的詳細內容。更多資訊請關注PHP中文網其他相關文章！