為什麼 CSS 中的文字裝飾不能正確繼承？

CSS 文字修飾覆蓋問題

在 CSS 屬性層次結構中，特定屬性優先於從父元素繼承的屬性。但是，text-decoration 屬性對此規則表現出例外。

問題：

考慮以下程式碼：

<a href="#">
  A <span>red</span> anchor
</a>

a {
  color: blue;
  font-family: Times New Roman;
  text-decoration: underline;
}

span {
  color: red;
  font-family: Arial;
  text-decoration: none;
}

如圖所示[demo](http://jsfiddlenet /5t9sV/)，子元素span 的text-decoration 屬性不會覆蓋父元素一個

原因：

根據CSS 規範，後代元素的

text-decoration 屬性「不能對裝飾產生任何影響」祖先的。 「這本質上意味著文字裝飾會應用於整個元素，無論是否存在任何子元素。

解決方案：

在CSS3 中，有一個名為

的屬性text-decoration-skip可以應用於子元素以跳過繼承的文字裝飾。例如，要顯示span元素內的文字沒有底線，您可以加入：

注意墨跡是

text-decoration-skip

span {
  text-decoration-skip: ink;
}

的可能值之一，其中包括字元、空格和嵌入物件。

以上是為什麼 CSS 中的文字裝飾不能正確繼承？的詳細內容。更多資訊請關注PHP中文網其他相關文章！