logo标签列表

去除链接中的蓝色下划线

csshyperlinkunderline
715
我试图使链接以白色呈现，没有下划线。文字颜色正确地显示为白色，但蓝色的下划线仍然存在。我尝试在CSS中使用text-decoration: none;和text-decoration: none !important;来移除链接下划线，但都没有成功。 

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}
<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

如何去掉链接的蓝色下划线？

2
当你使用text-decoration:none时，它应该会消失。你确定你将其应用于正确的元素吗？你能提供示例代码吗？ - Davor Lucic
text-decoration: none 在哪里被使用了？ - shuttle87
22个回答
983

你没有将 text-decoration: none; 应用于锚点元素 (.boxhead a)，而是应用于一个元素 (.boxhead)。

尝试使用以下代码：

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}
14
如果您希望链接下划线围绕 span 标签内的文本不可见，但同时保留周围文本的下划线，该怎么办？ - JMTyler
5
@rebus，你不行吗？为什么？因为在至少IE7+和FireFox 4+中，你可以这样做，但是在Chrome中却不能。以下是我测试过在非Chrome浏览器上可用的代码：.toc-list a > span{text-decoration:none !important;} 我认为@JMTyler的问题是合理的；我正在寻找相同的解决方案。 - Tony Topper
13
似乎text-decoration不支持在嵌套标签上覆盖，如上所示。一旦你应用了a { text-decoration: underline; }规则，你就无法通过a .wish_this_were_not_underlined { text-decoration: none; }取消应用。我找不到相关参考资料，但这是我的经验（在Chrome中）。 - Partly Cloudy
2
和其他人一样，我也无法通过应用 text-decoration: none; 来去掉下划线，所以我们选择使用 text-decoration: underline; text-decoration-color: white; 来隐藏该行。/hack - Ryan Burbidge
3
如果你只想从锚点内部的元素中删除下划线，而不是整个锚点。你需要将内部元素设置为inline-block，如下所示：.boxhead .otherPage { display: inline-block; color: #FFFFFF; text-decoration: none; } - Patrick Denny
显示剩余4条评论
270
锚标签（链接）也有伪类，例如visited，hover，link和active。确保您的样式应用于相关状态，并且没有其他样式冲突。
例如：
a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

请访问W3.org以了解更多关于用户行为伪类:hover、:active和:focus的信息。

5
当你说 a:click 时，我认为你的意思是 a:link。 - artlung
9
这应该是实际被接受的答案，因为我在点击按钮链接后也遇到了同样的问题。当我回到页面时，“visited”属性仍然变成了紫色。 - Doresoom
36

text-decoration: none !important应该可以去掉它..您确定没有border-bottom: 1px solid存在吗？（在Firebug/F12中跟踪计算样式，在IE中）

7
对我来说，设置 border-bottom-style: none; 解决了我的问题。 - agentofuser
32

只需将此属性添加到您的锚标记中：

style="text-decoration:none;"

示例：

<a href="page.html"  style="text-decoration:none;"></a>

或者使用CSS的方法。

.classname a {
    color: #FFFFFF;
    text-decoration: none;
}
21
有时候你看到的不是文本下划线，而是一个盒子阴影。
尝试这样做（使用适合你的CSS选择器）：
a:hover, a:visited, a:link, a:active {
  text-decoration: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
1
这个应该是答案。有时，盒阴影会产生下划线的效果。 - Bhargav
这是一个答案，但不是最好的。它们的范围是全局的，而不是特定的。类似这样的东西应该可以解决问题：.otherPage a:link {text-decoration:none;}；如果需要的话，重复访问、激活和悬停操作。 - Ajowi
16

你忘记为锚标签添加text-decoration:none。因此，代码应该如下所示。

.boxhead a {
    text-decoration: none;
}
<div class="boxhead">
    <h2>
        <span class="thisPage">Current Page</span>
        <a href="myLink"><span class="otherPage">Different Page</span></a>
    </h2>
</div>

更多的文本修饰标准属性

在这里输入图片描述

11

通常情况下，如果你的“下划线”颜色与文本颜色不同（并且没有在内联中覆盖“color:”），那么它不是来自“text-decoration:”。这必须是“border-bottom:”。

不要忘记去掉伪类的边框！

a, a:link, a:visited, a:active, a:hover {border:0!important;}

这段代码假设它在一个锚点上。相应地更改为其包装器... 在找到根本原因后，使用特异性而不是"!important"。

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color - snarf
9
没有看到页面，很难推测。
但听起来像是应用了border-bottom: 1px solid blue;。也许添加border: none;。 text-decoration: none !important是正确的；但有可能您仍然有另一个样式覆盖了该CSS。
这就是使用Firefox Web Developer Toolbar的好处所在。您可以在那里直接编辑CSS并查看是否有效，至少对于Firefox而言。它在CSS→Edit CSS下面。
5
  a {
    color: unset;
    text-decoration: unset;
  }
4

虽然其他答案都是正确的，但有一种简单的方法可以消除所有讨厌链接下划线的问题：

a {
   text-decoration: none;
}

这将从您的页面中的每个链接中移除下划线！
确保它在锚标签上，内联可能更好，因为您可能希望在其他链接上使用下划线。 - Asuquo12
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接