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

Question

我试图将链接显示为白色，没有下划线。文本颜色正确显示为白色，但蓝色下划线固执地持续存在。我在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>

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

Answer 1

正如我所料，你不是将text-decoration: none;应用于锚（.boxhead a）而是应用于span元素（.boxhead）。

试试这个：

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

Answer 2

如果text-decoration: none或border: 0不起作用，请尝试在html中应用内联样式。

Answer 3

只需使用该物业

border:0;

而且你被覆盖了。当文本装饰属性完全工作时，完美地为我工作。

Answer 4

这些答案都不适合我。就我而言，有一个标准

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

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

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

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

问题不复存在。

Answer 5

以下是asp.net webforms LinkButton控件的示例：

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

代码背后：

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

Answer 6

你在错误的选择器中使用了text-decoration none。您需要检查装饰无需的标签。

您可以使用此代码

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

要么

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

要么

a{text-decoration: none !important;}

Answer 7

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

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

Answer 8

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

Answer 9

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

例如：

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

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

Answer 10

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

Answer 11

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

style="text-decoration:none;"

例：

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

或者使用CSS方式。

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

Answer 12

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

试试这个（使用适合你的CSS选择器）：

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

    text-decoration: none!important;

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

Answer 13

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

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

但它听起来像你可能有一个border-bottom: 1px solid blue;被应用。也许添加border: none;。 text-decoration: none !important是对的，你可能有另一种风格仍然凌驾于CSS之上。

这是使用Firefox Web Developer Toolbar很棒的地方，你可以在那里编辑CSS，看看是否有用，至少对于Firefox来说。它在CSS > Edit CSS下。

Answer 15

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

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

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

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

Answer 16

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

a {
   text-decoration:none;
}

这将删除您网页上每个单一链接的下划线！

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

问题描述投票：471回答：15

15个回答

最新问题

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

问题描述 投票：471回答：15

15个回答

最新问题

问题描述投票：471回答：15