我试图有一个链接显示在白色,没有下划线。文本颜色正确地显示为白色,但蓝色下划线顽固地坚持。我尝试了文字装饰:没有;文字装饰:none !在CSS中删除链接下划线。既不工作。

.boxhead .otherPage { 颜色:# FFFFFF; 文字修饰:没有; } < div class = "表头栏”> < h2 > <span class="thisPage">当前页面</span> <a href="myLink"><span class="otherPage">Different Page</span></a> . < / h2 > < / div >

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


当前回答

没有一个答案对我有用。在我的案例中,有一个标准

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

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

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

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

问题已经解决了。

其他回答

锚标记(link)也有伪类,如visited、hover、link和active。确保您的样式应用于有问题的状态,并且没有其他样式冲突。

例如:

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

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

覆盖嵌套的文本装饰样式。

寻找任何::before或::after选择器,并将none显示为任何文本装饰,border-bottom等,或将属性(unset)重置为任何文本颜色属性,如:text-decoration-color, background-color等。

.boxhead .otherPage {
    color: #FFFFFF;
}

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

or

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

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

a {
   text-decoration: none;
}

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

没有看到那页纸,很难推测。

但听起来你可能有一个边界底部:1px纯蓝色;被应用。也许可以添加border: none;。文字装饰:没有!重要的是正确的;有可能你有另一种样式仍然覆盖这个CSS。

这就是使用Firefox Web开发工具栏非常棒的地方。你可以在那里编辑CSS,看看它是否工作,至少对Firefox是这样。它在CSS→编辑CSS。

一般来说,如果你的“下划线”和你的文本不是同一种颜色(并且“color:”在行内没有被覆盖),它就不是来自“text-decoration:”。它必须是“边界底部:”。

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

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

这个片段假设它位于一个锚上。相应地更改它的包装…用“专一”而不是“!”在你找到根本原因之后。