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

Question

我试图将链接显示为白色,没有下划线.文本颜色正确显示为白色,但蓝色下划线固执地持续存在.我尝试text-decoration: none;并text-decoration: none !important;在CSS中删除链接下划线.都没有奏效.

HTML:

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

CSS:

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

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

Answer 1

正如我所料,您不是应用于text-decoration: none;锚点(.boxhead a)而是应用于span元素(.boxhead).

试试这个:

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

Answer 2

锚标记(链接)也有伪类,如访问,悬停,链接和活动.确保您的样式应用于相关的状态,并且没有其他样式存在冲突.

例如:

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

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

Answer 3

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

Answer 4

只需将此属性添加到锚标记即可

style="text-decoration:none;"

例:

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

或者使用CSS方式.

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

Answer 5

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

文本修饰的更多标准属性

Answer 6

有时你看到的是一个盒子阴影,而不是文字下划线.

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

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

    text-decoration: none!important;

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

Answer 7

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

但对我来说听起来像你可能会border-bottom: 1px solid blue;被应用.也许加border: none;.text-decoration: none !important是的,有可能你有另一种风格仍然覆盖CSS.

这就是使用Firefox Web Developer Toolbar非常棒的地方,您可以在那里编辑CSS,看看是否有用,至少对Firefox来说是这样.它在CSS > Edit CSS.

Answer 8

通常,如果你的"下划线"与你的文字颜色不同[并且'颜色:'没有被内联覆盖],那么它不是来自"文字装饰:"它必须是"border-bottom:"

不要忘记从伪类上取下边框!

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

这个片段假定它在一个锚点上,相应地更改它的包装器...并在追踪根本原因后使用特异性而不是"!important".

Answer 9

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

a {
   text-decoration:none;
}

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

Answer 10

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