660

我试图让一个链接以白色显示,没有下划线。文本颜色正确显示为白色,但蓝色下划线顽固地持续存在。我尝试在 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>

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

4

20 回答 20

920

您不是应用于text-decoration: none;锚点 ( .boxhead a),而是应用于跨度元素 ( .boxhead)。

试试这个:

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}
于 2010-05-07T15:50:41.687 回答
249

锚标签(链接)也有visited、hover、link、active等伪类。确保您的样式适用于有问题的州,并且没有其他样式发生冲突。

例如:

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

有关用户操作伪类 :hover、:active 和 :focus的更多信息,请参阅W3.org 。

于 2010-05-07T15:35:05.827 回答
36

text-decoration: none !important应该删除它..你确定没有border-bottom: 1px solid潜伏吗?(在 IE 中跟踪 Firebug/F12 中的计算样式)

于 2010-05-07T15:35:50.343 回答
31

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

style="text-decoration:none;"

例子:

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

或者使用 CSS 方式。

.classname a {
    color: #FFFFFF;
    text-decoration: none;
}
于 2013-12-11T05:52:41.840 回答
19

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

试试这个(使用任何适合你的 CSS 选择器):

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

    text-decoration: none!important;

    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}
于 2017-03-11T22:58:33.570 回答
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>

文本装饰的更多标准属性

在此处输入图像描述

于 2017-01-19T12:50:18.563 回答
11

通常,如果您的“下划线”与文本的颜色不同[并且“颜色:”未被内联覆盖],则它不是来自“文本装饰:”它必须是“边框底部:”

别忘了把你的伪类的边界也去掉!

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

此代码段假定它位于锚点上,相应地更改为它的包装器......并在找到根本原因后使用特异性而不是“!important”。

于 2010-05-07T20:30:50.640 回答
9

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

但在我看来,你可能已经border-bottom: 1px solid blue;申请了。也许添加border: none;. text-decoration: none !important是的,您可能有另一种样式仍然覆盖该 CSS。

这就是使用Firefox Web Developer Toolbar很棒的地方,您可以在此处编辑 CSS 并查看是否可以正常工作,至少对于 Firefox 来说是这样。它在CSS > Edit CSS.

于 2010-05-07T15:44:01.657 回答
4

虽然其他答案是正确的,但有一种简单的方法可以消除所有这些讨厌的链接上的下划线:

a {
   text-decoration:none;
}

这将从您页面上的每个链接中删除下划线!

于 2017-06-30T18:23:02.283 回答
3
  a {
    color: unset;
    text-decoration: unset;
  }
于 2019-11-25T12:54:09.430 回答
2

您在错误的选择器中使用了无文本装饰。你需要检查你需要哪个标签来装饰没有。

您可以使用此代码

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

或者

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

或者

a{text-decoration: none !important;}
于 2018-06-22T19:50:55.790 回答
2

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

作为一个黑客,我将颜色更改为透明:

文字装饰颜色:透明;
于 2020-04-07T16:04:08.897 回答
1

只需使用该属性

border:0;

你被覆盖了。当 text-decoration 属性 dint 完全起作用时,对我来说非常有效。

于 2016-09-22T09:11:46.230 回答
1

如果text-decoration: noneborder: 0不起作用,请尝试在您的 html 中应用内联样式。

于 2018-06-12T01:09:20.090 回答
1

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

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

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

所以我在标题的末尾添加了这样的代码:

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

问题不再存在。

于 2018-07-12T04:22:33.440 回答
0

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

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

于 2019-06-26T17:58:43.550 回答
0

就我而言,我的 HTML 格式不正确。该链接位于<u>标签内,而不是<ul>标签内。

于 2019-07-10T22:48:37.260 回答
0

设置文本装饰:无;用于锚标记。

示例 html。

<body>
    <ul class="nav-tabs">
        <li><a href="#"><i class="fas fa-th"></i>Business</a></li>
        <li><a href="#"><i class="fas fa-th"></i>Expertise</a></li>
        <li><a href="#"><i class="fas fa-th"></i>Quality</a></li>
    </ul>
</body>

示例 CSS:

.nav-tabs li a{
  text-decoration: none;
}
于 2020-07-04T15:03:22.673 回答
0

覆盖嵌套的文本装饰样式。
查找任何::before 或 ::after选择器,并对任何文本装饰、边框底部等不显示任何内容,或将属性(未设置)重置为任何文本颜色属性,例如:text-decoration-color、background-color、等等

.boxhead .otherPage {
color: #FFFFFF;
}
a.boxhead .otherPage:before {
background-color: unset;
}

或者

a.boxhead .otherPage:before {
background-color: unset !important;
}
于 2021-11-02T18:51:45.197 回答
-1

这是 asp.net webforms LinkBut​​ton 控件的示例:

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

后面的代码:

 lbmmr1.Attributes.Add("style", "text-decoration: none;")
于 2017-03-08T16:21:16.543 回答