Html 如何删除锚点（链接）的下划线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2041388/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove the underline for anchors(links)?
提问by Steven
Is there anyway (in CSS) to avoid the underline for the text and links introduced in the page .. ?
无论如何（在CSS 中）是否可以避免页面中引入的文本和链接的下划线..？
回答by Emil Vikstr?m
Use CSS. this removes underlines from aand uelements:
使用 CSS。这将从a和u元素中删除下划线：
a, u {
text-decoration: none;
}
Sometimes you need to override other styles for elements, in which case you can use the !importantmodifier on your rule:
有时您需要覆盖元素的其他样式，在这种情况下，您可以!important在规则上使用修饰符：
a {
text-decoration: none !important;
}
回答by DanDan
The css is
css是
text-decoration: none;
and
和
text-decoration: underline;
回答by Ashwin Shahi
This will remove your colour as well as the underline that anchor tag exists with
这将删除您的颜色以及锚标记存在的下划线
a {
text-decoration: none ;
}
a:hover
{
color:white;
text-decoration:none;
cursor:pointer;
}
回答by XLogic
The simplest option is this:
最简单的选择是这样的：
<a style="text-decoration: none">No underline</a>
Of course, mixing CSS with HTML (i.e. inline CSS) is not a good idea, especially when you are using atags all over the place.
That's why it's a good idea to add this to a stylesheet instead:
当然，将 CSS 与 HTML 混合（即内联 CSS）并不是一个好主意，尤其是当您a到处使用标签时。
这就是为什么将它添加到样式表是个好主意的原因：
a {
text-decoration: none;
}
Or even this code in a JS file:
或者甚至是 JS 文件中的这段代码：
var els = document.getElementsByTagName('a');
for (var el = 0; el < els.length; el++) {
els[el].style["text-decoration"] = "none";
}
回答by Alan Haggai Alavi
Use CSS to remove text-decorations.
使用 CSS 删除text-decorations。
a {
text-decoration: none;
}
回答by praveen kaushik
Best Option for you if you just want to remove the underline from anchor link only-
如果您只想从锚链接中删除下划线，则是您的最佳选择-
#content a{
text-decoration-line:none;
}
This will remove the underline.
这将删除下划线。
Further you can use similar syntax for manipulating other styles too using-
此外，您也可以使用类似的语法来操作其他样式，使用 -
text-decoration: none;
text-decoration-color: blue;
text-decoration-skip: spaces;
text-decoration-style: dotted;
Hope this helps!
希望这可以帮助！
P.S.-This is my first answer ever!
PS-这是我有史以来的第一个答案！
回答by Sanjib Karmakar
Sometime it will override by some rendering UI CSS. Better to use:
有时它会被一些渲染 UI CSS 覆盖。更好地使用：
a.className {
text-decoration: none !important;
}
回答by Aleksandr Khomenko
in my case there was a rule about hover-effect by the anchor, like this:
就我而言，锚点有一个关于悬停效果的规则，如下所示：
#content a:hover{
border-bottom: 1px solid #333;
}
Of course, text-decoration:none;could not help in this situation.
And I spend a lot of time until I found it out.
当然，text-decoration:none;在这种情况下也无济于事。我花了很多时间才发现它。
So: An underscore is not to be confused with a border-bottom.
所以：不要将下划线与边框底部混淆。
回答by Vilx-
To provide another perspective to the problem (as inferred from the title/contents of the original post):
为问题提供另一个视角（从原始帖子的标题/内容推断）：
If you want to track down what is creating rogue underlines in your HTML, use a debugging tool. There are plenty to choose from:
如果您想追踪在您的 HTML 中创建恶意下划线的原因，请使用调试工具。有很多可供选择：
For Firefox there is FireBug;
对于 Firefox，有 FireBug；
For Opera there is Dragonfly (called "Developer tools" in the Tools->Advanced menu; comes with Opera by default);
对于 Opera，有 Dragonfly（在工具->高级菜单中称为“开发者工具”；Opera 默认附带）；
For IE there is the "Internet Explorer Developer Toolbar", which is a separate download for IE7 and below, and is integrated in IE8 (hit F12).
对于 IE，有“Internet Explorer 开发人员工具栏”，它是 IE7 及以下版本的单独下载，并集成在 IE8 中（按 F12）。
I've no idea about Safari, Chrome and other minority browsers, but you should probably have at least one of the three above on your machine anyway.
我对 Safari、Chrome 和其他少数浏览器一无所知，但无论如何，您的机器上应该至少安装上述三种浏览器中的一种。
回答by Frederick John
When you want to use an anchor tag simply as a link without the added styling (such as the underline on hover or blue color) add class="no-style"to the anchor tag. Then in your global stylesheet create the class "no-style".
当您只想将锚标记用作链接而不添加样式（例如悬停时的下划线或蓝色）时，请添加 class="no-style"到锚标记。然后在您的全局样式表中创建“无样式”类。
.no-style {
text-decoration: none !important;
}
.no-style {
text-decoration: none !important;
}
This has two advantages.
这有两个优点。
- It will not affect all anchor tags, just the ones with the "no-style" class added to them.
- It will override any other styling that may otherwise prevent setting text-decoration to none.
- 它不会影响所有锚标签，只会影响添加了“no-style”类的锚标签。
- 它将覆盖任何其他样式，否则可能会阻止将 text-decoration 设置为 none。
