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

Question

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

score 609 · Accepted Answer

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

a, u {
  text-decoration: none;
}

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

a {
  text-decoration: none !important;
}

score 30 · Accepted Answer

30

CSS是

text-decoration: none;

和

text-decoration: underline;

于 2010-01-11T11:10:46.747 回答

score 18 · Accepted Answer

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

a {
  text-decoration: none;
}

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

score 16 · Accepted Answer

最简单的选择是这样的：

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

score 7 · Accepted Answer

7

使用 CSS 删除text-decorations。

a {
  text-decoration: none;
}

于 2010-01-11T11:10:38.553 回答

score 7 · Accepted Answer

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

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

这将删除下划线。

此外，您也可以使用类似的语法来操作其他样式：

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

希望这可以帮助！

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

score 4 · Accepted Answer

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

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

score 4 · Accepted Answer

就我而言，锚点有一条关于悬停效果的规则，如下所示：

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

当然，text-decoration: none;在这种情况下也忍不住。我花了很多时间直到我发现它。

所以：不要将下划线与边框底部混淆。

score 3 · Accepted Answer

我一直在网络打印中遇到这个问题并解决了。验证结果。

a {
  text-decoration: none !important;
}

有用！

score 2 · Accepted Answer

为问题提供另一个视角（从原始帖子的标题/内容推断）：

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

对于 Firefox，有 FireBug；

对于 Opera，有 Dragonfly（在工具->高级菜单中称为“开发者工具”；Opera 默认自带）；

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

我对 Safari、Chrome 和其他少数浏览器一无所知，但无论如何，您的机器上应该至少有上述三种浏览器中的一种。

score 2 · Accepted Answer

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

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

这有两个优点。

它不会影响所有锚标签，只会影响添加了“无样式”类的锚标签。
它将覆盖任何其他可能阻止将 text-decoration 设置为 none 的样式。

score 1 · Accepted Answer

1

使用 css 属性，

text-decoration:none;

从链接中删除下划线。

于 2018-10-04T12:49:35.270 回答

score 0 · Accepted Answer

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

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

或者将 CSS 包含在网页上的样式标签中。

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

我不建议在除了链接之外的任何东西上使用下划线，下划线通常被认为是可点击的东西。如果它不可点击，请不要在其下划线。

可以在 w3schools 学习 CSS 基础知识

score 0 · Accepted Answer

<u>

是一个已弃用的标签。

利用...

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

使用包含...的 CSS 文件

span.underline
{
    text-decoration: underline;
}

要不就...

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

score 0 · Accepted Answer

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

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

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

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

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

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

15 回答 15

Related

Reference