html - アンカー内のスパンから下線を削除

Question

私はこの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を除くすべてのテキストに下線を引くにはどうすればよいでしょうか。ありがとう

Answer 1

ではなく をターゲットにする必要がanchor tagあるため、span tagこれを使用します

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

理由:text-decoration: underline;はデフォルトのブラウザー スタイルシートでタグに適用される<a>ため、それを上書きしたい場合、または<a>Web サイトのどのタグにも下線を付けたくない場合は、単にこれを使用するよりも

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;
}

Answer 2

そのはず

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;   
}

デモ

Answer 3

spanクラスでtatを次のように作成しますa

aリンクではあるが ではないため、デフォルトの下線が引かれるタグですspan。したがって、タグ内にあるものはすべて、自動的に下線を引きます。

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

デモ

Answer 4

そのはず

ul li ul li a {

    text-decoration:none;
}​