从链接中删除蓝色下划线

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

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

1351720 次浏览

锚点标记(链接)也有伪类,例如已访问、悬停、链接和活动。确保您的样式应用于有问题的状态,并且没有其他样式冲突。

例如:

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

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

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

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

但在我看来,您可能正在应用border-bottom: 1px solid blue;。也许添加border: none;text-decoration: none !important是对的,您可能有另一种样式仍然覆盖CSS。

这就是使用Firefox Web Developer工具栏很棒的地方,您可以在那里编辑CSS,看看是否有效,至少对于Firefox来说是这样。它在CSS > Edit CSS下。

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

试试这个:

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

通常,如果你的“下划线”和你的文本的颜色不一样[并且“颜色:”没有被内联覆盖],它就不是来自“文本装饰:”它必须是“边框底部:”

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

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

这个片段假设它在锚点上,相应地更改为它的包装器……并在您追踪根本原因后使用特异性而不是“!重要”。

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

style="text-decoration:none;"

示例:

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

或者使用CSS方式。

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

就用这房子吧

border:0;

你被覆盖了。当文本装饰属性力完全工作时,对我来说是完美的。

您错过了锚标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>

文本装饰的更多标准属性

在此处输入图片描述

下面是asp.netwebform LinkButton控件的示例:

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

背后的代码:

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

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

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

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


text-decoration: none!important;


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

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

a {
text-decoration:none;
}

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

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

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

您可以使用此代码

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

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

a{text-decoration: none !important;}

没有一个答案对我有用。在我的情况下,有一个标准

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

在我的代码中。基本上不管它是什么链接,文本颜色变成蓝色,链接保持不变。

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

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

问题不再。

将以下超文本标记语言代码放在 <BODY>标签:

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

在我的例子中,我的超文本标记语言格式很差。链接在<u>标签内,而不是<ul>标签。

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

正如其他人所指出的,似乎你不能覆盖嵌套的文本装饰样式……但是你可以更改文本装饰颜色。

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

text-decoration-color: transparent;

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

示例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;
}

覆盖嵌套文本装饰样式。
查找任何::bef或::af选择器并将其显示为任何文本装饰,边框底部等,或将属性重置(unset)为任何文本颜色属性,例如:text-装饰-颜色,背景颜色等。

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

a.boxhead .otherPage:before {
background-color: unset !important;
}