如何删除锚点（链接）的下划线？

312

无论如何（在CSS中）是否要避免在页面..中引入文本和链接的下划线？

html css underline

— 史蒂文
source

8

<penantic>您永远无法假设浏览器将如何呈现HTML。标签会呈现一个锚点，浏览器默认会选择该锚点显示为下划线。u是唯一的下划线标签。下面的答案是CSS答案</ pendantic>

— 死账户2010年

44

具有讽刺意味的是，某人足够学究地发表了此评论，却又没有足够的学问以正确（甚至连贯地！）拼写该单词，这真让我震惊。

— Technetium

除了下面的答案外，a:hover还应考虑处理问题，大多数流行的浏览器在悬停时都倾向于在锚点上显示下划线。

— Fr0zenFyr

517

使用CSS。这会删除a和u元素的下划线：

a, u {
    text-decoration: none;
}

有时您需要覆盖元素的其他样式，在这种情况下，可以!important在规则上使用修饰符：

a {
    text-decoration: none !important;
}

— 埃米尔·维克斯特伦（EmilVikström）
source

1

如果color: black !important;要为添加body，是否还会将所有元素（包括锚点，访问的锚点，悬停的锚点）设置为始终为黑色？

— Ωmega

ΩmegaΔ，显然不是，感谢您指出来，我发现整体上的身体规则有误。我已经更新了答案。

— EmilVikström2013年

我发现是，如果你设置样式text-decoration: none !important;的body元素，那么它为锚，只有当你明确地设定风格text-decoration: inherit;的a元素。

— Ωmega

7

通常最好避免!important使用特异性和基数来覆盖样式，否则您最终可能会得到一个样式表，!important而该样式表充满了对任何必要的结构的任何了解。这是代码气味的IMO。

— Mike Lyons

!important就像有个核武器。但是，一旦您开始尝试并被诱使使用!important其他元素（核武器），它的优势就会消失，而陷入僵局，这对于世界来说是巨大的，因为MUD确保了和平，但是在css的世界中，这种和平意味着您无法给予某些优势。

— JasonGenX

27

CSS是

text-decoration: none;

和

text-decoration: underline;

— 丹丹
source

16

这将删除您的颜色以及锚标记所在的下划线

 a {
     text-decoration: none ;
  }
a:hover
  {
    color:white;
    text-decoration:none;
    cursor:pointer;
   }

— 阿什温·沙希（Ashwin Shahi）
source

11

最简单的选择是这样的：

<a style="text-decoration: none">No underline</a>

当然，将CSS与HTML（即内联CSS）混合使用不是一个好主意，尤其是当您a在各处使用标签时。
这就是为什么最好将其添加到样式表中的原因：

a {
    text-decoration: none;
}

甚至是JS文件中的以下代码：

var els = document.getElementsByTagName('a');

for (var el = 0; el < els.length; el++) {
    els[el].style["text-decoration"] = "none";
}

— XLogic的
source

Iphone / Android不是很好的基准，因为它们不代表Gmail或Outlook的向后HTML呈现。

— Stuart

@XLogic：非常感谢

— Monika Patel

6

使用CSS删除text-decoration。

a {
    text-decoration: none;
}

— 艾伦·哈盖·阿拉维
source

6

如果您只想从锚链接中删除下划线，则是您的最佳选择-

    #content a{
                text-decoration-line:none;
                }

这将删除下划线。

此外，您也可以使用类似的语法来处理其他样式，

                text-decoration: none;
                text-decoration-color: blue;
                text-decoration-skip: spaces;
                text-decoration-style: dotted;

希望这可以帮助！

PS-这是我的第一个答案！

— Praveen Kaushik
source

4

在我的情况下，锚定有一个悬停效果规则，例如：

#content a:hover{
border-bottom: 1px solid #333;
}

当然，text-decoration:none;在这种情况下无济于事。我花了很多时间直到找到答案。

因此：下划线不要与底线混淆。

— 亚历山大·霍姆年科（Aleksandr Khomenko）
source

4

有时它将被一些渲染UI CSS覆盖。更好地使用：

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

— Sanjib Karmakar
source

1

这是一个可怕的想法。stackoverflow.com/questions/8360190/…–

— 本杰明·格伦鲍姆

2

为问题提供另一种观点（从原始帖子的标题/内容推断出）：

如果要跟踪在HTML中创建恶意下划线的原因，请使用调试工具。有很多选择：

对于Firefox，有FireBug；

对于Opera，有Dragonfly（在“工具”->“高级”菜单中称为“开发人员工具”；默认情况下是Opera附带的）；

对于IE，有一个“ Internet Explorer Developer Toolbar”，它是IE7及以下版本的单独下载，并集成在IE8中（按F12键）。

我对Safari，Chrome和其他少数族裔浏览器一无所知，但无论如何，您都应该至少在计算机上安装上述三种浏览器之一。

— 维尔克斯
source

Safari 3/4：macobserver.com/tmo/article/Safari_3.1_The_Magical_Develop_Menu

— mplungjan 2010年

1

当您只想将锚标签用作链接而没有添加样式（例如，悬停时的下划线或蓝色）时，请添加 class="no-style"到锚标签中。然后在您的全局样式表中创建“ no-style”类。

.no-style { text-decoration: none !important; }

这有两个优点。

它不会影响所有锚标记，只会影响添加了“ no-style”类的锚标记。
它将覆盖可能会阻止将文本修饰设置为none的任何其他样式。

— 弗雷德里克·约翰
source

0

不要忘了使用链接标签包含样式表

http://www.w3schools.com/TAGS/tag_link.asp

或将CSS括在网页的样式标签中。

<style>
  a { text-decoration:none; }
  p { text-decoration:underline; }
</style>

我不建议在链接以外的任何地方使用下划线，下划线通常被认为是可点击的。如果无法点击，请不要在其下划线。

可以在w3schools学习CSS基础知识

— 杰森
source

0

<u>

是已弃用的标签。

采用...

<span class="underline">My text</span>

与包含...的CSS文件

span.underline
{
    text-decoration: underline;
}

要不就...

<span style="text-decoration:underline">My Text</span>

— 无尽的
source

0

使用css属性，

text-decoration:none;

从链接中删除下划线。

— 史密塔·卡格瓦德（Smita Kagwade）
source

0

下划线可以通过称为文本装饰的CSS属性删除。

<style>
a{
text-decoration:none;
}
</style>

如果要删除除a之外的元素中存在的文本的下划线，则应使用以下语法。

<style>
element-name{
text-decoration:none;
}
</style>

还有许多其他文本修饰值可以帮助您设计链接。

— 设拉子
source

-1

我在网页打印中遇到了这个问题，并已解决。验证结果。

a {
    text-decoration: none !important;
}

有用！。

— 仁川
source