如何爲特定鏈接添加下劃線？

Question

我有一個問題，可能很容易，但我似乎無法弄清楚。我沒有下劃線的各個環節，除了上懸停，主動或聚焦：

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

現在，我在HTML結構是這樣的：

<div class="filter-wrapper"> 
    <a href=""> 
     <span class="filter-tag"> 
     Tag Name 
     </span> 
    </a> 
</div> 

我不希望任何下劃線上懸停，只爲該div激活或關注。我如何實現這一目標？

我試着用文本修飾爲它做一個特殊的類：沒有，但它似乎沒有工作。我覺得很愚蠢。

Answer 1

.filter-wrapper a:hover, .filter-wrapper a:focus, .filter-wrapper a:active { 
    text-decoration: none; 
} 

.filter-wrapper a:hover, 
 
    .filter-wrapper a:focus, 
 
    .filter-wrapper a:active { 
 
     text-decoration: none; 
 
    } 
 
    a { 
 
     text-decoration: none; 
 
    } 
 
    a:hover, 
 
    a:focus, 
 
    a:active { 
 
     text-decoration: underline; 
 
    }

<div class="filter-wrapper"> 
 
    <a href=""> 
 
    <span class="filter-tag"> 
 
     Tag Name 
 
     </span> 
 
    </a> 
 
</div> 
 

 
<a href="#">Test</a>