Как не иметь подчеркивания только для определенных ссылок?

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>