从锚点内的跨度中删除下划线答案

【问题标题】：Remove underline from span inside anchor从锚点内的跨度中删除下划线
【发布时间】：2014-04-15 15:59:20
【问题描述】：

我有这个 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;
}

为什么anchor里面的span还是有下划线的？

换句话说：我如何将所有文本都加下划线，除了 SPAN。谢谢

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：

+1 for 'display: inline-block' 以便内部 span 标签不再需要父块级元素的下划线，谢谢
啊！巫术！有人可以指出定义这种行为的规范吗？在尝试更改内部元素的 display 属性之前，我会尝试很多随机的东西。

【解决方案2】：

在课堂上将span设为a

a 是带有默认下划线的标签，因为它是一个链接而不是span。因此，a 标签内的任何内容都会自动使用下划线。

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

DEMO

【讨论】：

这并不能完全回答问题的“为什么”部分。
但是如果我想让除了跨度之外的所有文本都加下划线怎么办？
ul li ul li a { text-decoration:none; } ul li ul li a span { text-decoration:underline; }
@AspiringAqib 他要求相反的情况

【解决方案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;
}

【讨论】：

你能告诉我以前是什么吗，看不出你为什么编辑，根据我的记忆，只有这个 ul li ul li a { text-decoration:none; }
@Ruchira..你可以点击上面的edited 3hrs链接查看之前的编辑。