css - 文字装饰 :none; doesn't work for a simple example

我很好奇为什么 “不应该加下划线” 单词在下面的代码中仍然带有下划线:

<html>
<head>
<style type="text/css">
.badge1-link { text-decoration: none; }
.badge1 { text-decoration: underline; }

.badge2-link {text-decoration: underline;}
.badge2 {text-decoration: none;}

</style> 
</head>
<body>
<a href="#" class="badge1-link"><span class="badge1">Underlined</span> | not underlined</a>
<br/>
<a href="#" class="badge2-link"><span class="badge2"> Should not be underlined</span> | Underlined</a>
</body>
</html>

最佳答案

一旦给 anchor 标签加上下划线，就不能将其部分删除，就像您为 badge2 所建议的那样

请参阅此链接:Remove stubborn underline from link .接受的答案有一些评论是相同的。

您的问题的解决方案是从 anchor 标记中删除下划线，然后像对 badge1

那样添加部分下划线

关于css - 文字装饰 :none; doesn't work for a simple example，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11986948/