text-decoration下底線的問題

重點：text-decoration屬性不會被繼承

先來看一下

<p>
  <span style="text-decoration: underline;">
     有一些文字
  </span>
</p>

結果如下：

有一些文字

若在中間加上span並設定overline

<p>
  <span style="text-decoration: underline;">
  有一些
  <span style="text-decoration: overline;">額外的</span> 
  文字。
  </span>
</p>

結果如下：

這裡有一些額外的文字。

會發現-額外的-這3個字也有下底線，為何？

我們知道既然text-decoration屬性不會被繼承，那這3個字為何會有下底線呢？

把內部span顏色改成紅色看看

這裡有一些額外的文字。

overline與文字一起變成了紅色，但下底線沒變色

why?

因為下底線實際上是外面span的一部分，它只是在內部span下方經過而已

若我們幫外部span加上背景，一般希望背景會穿過內部span顯示出來

同樣的，父層的文字修飾線就會顯示在子層元素上(即使我們沒有幫子曾元素設定或繼承修飾線)


另外一種情況
若<a>內加上了<span>，如果想移除<a>的下底線，下面方式無法達成：

<a href="http://developer.netscape.com/">这个链接
  <span style="text-decoration: none; font-weight: bold;">
    有个span
  </span>在里面
</a>

必須用下面方式

a:link, a:visited {text-decoration: none;}

另外一個常見的情況是：
想要移除某些特定的links

<table id="navbar">
  <tr>
    <td><a href="link1.html">Home</a></td>
    <td><a href="link2.html">Electronics</a></td>
    <td><a href="link3.html">Accessories</a></td>
    <td><a href="link4.html">Software</a></td>
    <td><a href="link5.html">Checkout</a></td>
  </tr>
</table>

可用

table#navbar a {text-decoration: none;}

上面討論的原則，也適用於其他decoration



結論建議：

• 不要使用<span>去對links做style，無法移除如下底線之類的text-decoration
• text-decoration屬性不會被繼承

參考文章
https://developer.mozilla.org/zh-CN/docs/Understanding_Underlines