从链接中删除顽固的下划线

542

我试图以白色显示链接，但不带下划线。文本颜色正确显示为白色，但蓝色下划线顽固地保持不变。我试图text-decoration: none;和text-decoration: none !important;在CSS删除链接的下划线。两者都不起作用。

.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>

展开摘要

如何从链接中删除蓝色下划线？

css hyperlink underline

— 数码单反相机
source

1

好吧，当您进行文本装饰时，它应该消失：无。您确定将其应用于正确的元素吗？您可以提供示例代码吗？

— 达沃·卢西奇

文本装饰在哪里：没有使用？

— 穿梭车2010年

771

如我所料，您不是要应用text-decoration: none;到锚点（.boxhead a），而是要应用到span元素（.boxhead）。

尝试这个：

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

— 达沃·卢西奇（Davor Lucic）
source

12

但是，如果你有什么文本周围的跨度，以及，你希望周围的文字有链接的下划线，但跨度内的文本有没有？

— JMTyler 2010年

4

@rebus，你不能吗？为什么不？至少可以使用IE7 +和FireFox 4+，但由于某些原因不能在Chrome中使用。这是我必须在测试过的非Chrome浏览器中使用的代码：.toc-list a > span{text-decoration:none !important;} 我认为@JMTyler的问题是合法的；我正在寻找相同的解决方案。

— 托尼·托珀

7

text-decoration如上所示，它似乎不支持在嵌套标签上进行覆盖。一旦a { text-decoration: underline; }应用了规则，就无法取消应用该规则，例如使用a .wish_this_were_not_underlined { text-decoration: none; }。我找不到对此的参考，但这是我的经验（在Chrome中）。

— 局部多云

2

像上述其他应用程序一样，我无法通过应用对文本进行下划线，text-decoration: none;因此我们选择使用隐藏行text-decoration: underline; text-decoration-color: white;。/ hack

— Ryan Burbidge

1

如果您只是想从锚点内的元素而不是整个锚点上删除下划线。您需要像这样将内部元素设置为内联块： .boxhead .otherPage { display: inline-block; color: #FFFFFF; text-decoration: none; }

— Patrick Denny

213

锚标记（链接）还具有伪类，例如访问，悬停，链接和活动。确保您的样式已应用到相关状态，并且没有其他样式冲突。

例如：

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

有关用户操作伪类：hover，：active和：focus的更多信息，请参见W3.org 。

— 耶尔顿
source

5

我想你是a:link说你的意思a:click

— artlung 2010年

6

这应该是实际接受的答案，因为单击按钮链接后我遇到了同样的问题。当我回到页面时，所访问的属性仍变为紫色。

— Doresoom'1

33

text-decoration: none !important应该将其删除..您确定没有border-bottom: 1px solid潜伏吗？（在IE中的Firebug / F12中跟踪计算的样式）

— 亚历克斯·K
source

4

设置border-bottom-style: none;为我修复。

— Helder S Ribeiro '18

27

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

style="text-decoration:none;"

例：

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

或使用CSS方式。

.classname a {
    color: #FFFFFF;
    text-decoration: none;
}

— 纳加拉扬SR
source

16

有时，您看到的是框阴影，而不是文本下划线。

尝试一下（使用适合您的CSS选择器）：

a:hover, a:visited, a:link, a:active {

    text-decoration: none!important;

    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

— 杰夫杰克
source

1

这应该是答案。有时，框阴影会产生下划线影响。

— 巴尔加夫

这是一个答案，但不是最好的。这些范围是全球性的，而不是特定的。这样的事情应该做的伎俩：.otherPage a:link {text-decoration:none;}; 如果需要，对访问过的，活动的和悬停的重复此操作。

— 阿约维

14

您错过 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>

展开摘要

文本装饰的更多标准属性

— Santosh Khalse
source

9

没有看到页面，很难推测。

但这听起来像是您可能border-bottom: 1px solid blue;正在申请中。也许加上border: none;。text-decoration: none !important是的，您可能有另一种样式仍然可以覆盖该CSS。

这是使用Firefox Web Developer工具栏的绝佳地方，您可以在那里编辑CSS并查看其是否正常运行，至少对于Firefox而言。在下CSS > Edit CSS。

— 阿龙
source

9

通常，如果您的“下划线”与您的文本的颜色不同[并且'color：'不能被内联覆盖]，它不是来自“文本装饰”：它必须是“边界底”：

别忘了也取消伪类的边界！

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

该代码段假定其位于锚点上，并相应地更改为它的包装程序……并在找到根本原因后使用特异性而不是“！important”。

— 乔尔·克劳福德·史密斯
source

4

尽管其他答案是正确的，但是有一种简单的方法可以消除所有讨厌的链接上的下划线：

a {
   text-decoration:none;
}

这将从页面上的“每个链接”中删除下划线！

— 亚尔兹科技
source

确保在anchor标签和内联上的效果更好，因为您可能希望在其他链接上使用下划线。

— Asuquo12

2

如果text-decoration: none还是border: 0行不通，请尝试在html中应用内联样式。

— 德克
source

1

只需使用属性

border:0;

然后你就被覆盖了。当text-decoration属性dint完全起作用时，对我来说效果很好。

— MK Sandhu
source

1

没有答案对我有用。就我而言，有一个标准

a:-webkit-any-link {
text-decoration: underline;

在我的代码中。基本上无论它是什么链接，文本颜色都变为蓝色，而链接保持不变。

所以我将代码添加到标题的末尾，如下所示：

<head>
  </style>
    a:-webkit-any-link {
      text-decoration: none;
    }
  </style>
</head>

问题就不复存在了。

— 新
source

1

  a {
    color: unset;
    text-decoration: unset;
  }

— 伊察
source

0

这是asp.net Web窗体LinkButton控件的示例：

 <asp:LinkButton ID="lbmmr1" runat="server" ForeColor="Blue" />

后面的代码：

 lbmmr1.Attributes.Add("style", "text-decoration: none;")

— 乔希·耶茨（1980）
source

0

您在错误的选择器中没有使用文本修饰。您需要检查不需要装饰的标签。

您可以使用此代码

.boxhead h2 a{text-decoration: none;}

要么

.boxhead a{text-decoration: none !important;}

要么

a{text-decoration: none !important;}

— 阿卜杜·巴沙尔（Md Abul Bashar）
source

0

将以下HTML代码放在<BODY>标记之前：

<STYLE>A {text-decoration: none;} </STYLE>

— qarly_blue
source

0

就我而言，我的HTML格式不正确。链接在<u>标签内，而不是<ul>标签内。

— 麦克维尔克斯
source

0

正如其他人指出的那样，您似乎无法覆盖嵌套的文本装饰样式...但是可以更改文本装饰颜色。

作为一种技巧，我将颜色更改为透明的：

文字装饰颜色：透明；

— 本
source