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

最新推荐文章于 2024-03-17 10:40:27 发布

翻译最新推荐文章于 2024-03-17 10:40:27 发布 · 975 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://oldbug.net/q/8z3C/How-to-remove-the-underline-for-anchors-links

文章标签：

#html #css #underline

本文探讨了如何使用CSS去除HTML锚点（链接）的下划线，包括在样式表中添加规则，避免内联CSS，以及在特定情况下使用更具体的CSS选择器来覆盖默认样式。

本文翻译自：How to remove the underline for anchors(links)?

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

#1楼

参考：https://stackoom.com/question/8z3C/如何删除锚点-链接-的下划线

#2楼

The simplest option is this: 最简单的选择是：

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

Of course, mixing CSS with HTML (ie inline CSS) is not a good idea, especially when you are using a tags all over the place. 当然，混合HTML（即内嵌CSS）CSS是不是一个好主意，尤其是当你使用a标签所有的地方。
That's why it's a good idea to add this to a stylesheet instead: 这就是为什么将它添加到样式表中是个好主意：

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";
}

#3楼

Sometime it will override by some rendering UI CSS. 有时它会被一些渲染UI CSS覆盖。 Better to use: 更好用：

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

#4楼

Use CSS to remove text-decoration s. 使用CSS删除text-decoration 。

a {
    text-decoration: none;
}

#5楼

The css is css是

text-decoration: none;

and 和

text-decoration: underline;

#6楼

Use CSS. 使用CSS。 this removes underlines from a and u elements: 这将删除a和u元素的下划线：

a, u {
    text-decoration: none;
}

Sometimes you need to override other styles for elements, in which case you can use the !important modifier on your rule: 有时您需要覆盖元素的其他样式，在这种情况下，您可以在规则上使用!important修饰符：

a {
    text-decoration: none !important;
}