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>标记有一个下划线而不是简单地使用这个

a {
   text-decoration: none;
}

修改：我在阅读您的评论时，如果您希望文字加下划线，除了<span>中的文字，请使用此

Demo

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

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

Answer 2

在课堂上span

a是默认下划线的标记，因为它是一个链接，但不是a。因此，无论标签内部是什么，都会自动采用下划线。

span

<强> DEMO

Answer 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

Answer 4

应该是

ul li ul li a {

    text-decoration:none;
}

从锚内部的跨度中删除下划线

4 个答案: