我很好奇为什么"Should not be underlined"下面的代码中仍然有下划线：
<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>
一旦一个锚标签被赋予了下划线，它就不能被部分删除，就像你建议的badge2
请参阅此链接：从链接中删除顽固的下划线。接受的答案有一些相同的评论。
您的问题的解决方案是从锚标记中删除下划线，然后像使用badge1一样添加部分下划线
display:inline-block可以解决问题。它对我有用。改变你的风格如下
.badge2 {display:inline-block;text-decoration: none;}
请使用:link伪类。
锚正在装饰跨度。文本装饰也可以是“上划线”，因此可以覆盖带下划线的文本。所以在这种情况下，css 的行为与预期的一样：锚没有在下划线的跨度下划线。
我一直有一个类似的问题：一个链接有一个蓝色的下划线，{text-decoration: underline;}什么也没做。我试过{text-decoration: underline;}了，虽然这确实摆脱了蓝线，但它用黑线代替了它。以我 200 的智商，我决定将下划线涂成白色：{text-decoration: underline white;}这解决了问题，哈哈。