Удалить подчеркивание от внутреннего анкера

У меня есть этот HTML:

<ul>
<li>
    <ul>
        <li>
            <a href="#"> <span> Test </span> Link </a>
        </li>
    </ul>
</li>
</ul>

И этот CSS:

ul li ul li span {

    text-decoration:none;
}

Почему диапазон внутри анкера все еще имеет подчеркивание?

Другими словами: Как бы я получил весь текст, подчеркнутый, кроме SPAN. Благодаря

Ответ 1

Вам нужно настроить таргетинг на anchor tag, а не на span tag, поэтому используйте

ul li ul li a {
    text-decoration:none;
}

Причина: text-decoration: underline; применяется к тегу <a> по умолчанию в таблице стилей браузера, поэтому, если вы хотите переместить его или хотите, чтобы ни один из тегов <a> на вашем сайте не имел подчеркивания, а просто использовал это

a {
   text-decoration: none;
}

Изменить: поскольку я прочитал ваш комментарий, если вы хотите, чтобы текст подчеркивался, кроме текста в <span>, чем использовать этот

Демо

ul li ul li a {
    text-decoration:underline;
}

ul li ul li a span {
    text-decoration:none;
    display: inline-block;
}

Ответ 2

Сделайте tat span в классе как a

a - это тег, который принимает подчеркивание по умолчанию, поскольку это ссылка, но не span. Таким образом, все, что находится внутри тега, автоматически выделяет подчеркивание.

ul li ul li a{
    text-decoration:none;
}

DEMO

Ответ 3

Это должно быть

ul li ul li a {
text-decoration:none;
}
ul li ul li a:hover {
text-decoration:underline;
}

ul li ul li a span {
text-decoration:none;
display: inline-block;   
}

DEMO

Ответ 4

Это должно быть

ul li ul li a {

    text-decoration:none;
}