CSS 精準去除單個超鏈接下劃線：class 選擇器實戰

需求

頁面有 N 個 <a> 標籤，僅需其中一個無下劃線，且不修改 HTML 行內樣式。

解決方案

1. HTML 賦予唯一 class：<a class="no-underline" href="...">特殊鏈接</a>
2. CSS 定義：

   .no-underline {
       text-decoration: none;
       /* 可選：保持其他樣式一致 */
       color: inherit;
   }

進階：狀態保持

若需保留 hover/active 狀態無下劃線，擴展選擇器：

.no-underline,
.no-underline:hover,
.no-underline:active,
.no-underline:focus {
    text-decoration: none;
}

原理說明

text-decoration 為非繼承屬性，直接作用於元素本身。類選擇器權重 (0,0,1) 高於元素選擇器 (0,0,0)，故能覆蓋全局 a { text-decoration: underline; }。若全局使用 !important，則需在類中同樣添加 !important（不推薦）。