CSS 如何删除锚链接 Link 的下划线?

要删除HTML中锚点（链接）的下划线，你通常需要使用CSS。这里有一个简单的例子，展示了如何为网站上的所有链接删除下划线：

css
a {
  text-decoration: none;
}

如果你只想针对特定的链接删除下划线，你可以给那个链接添加一个类，然后指定那个类在CSS中不显示下划线：

html
<!-- HTML -->
<a href="https://www.example.com" class="no-underline">这是一个没有下划线的链接</a>

css
/* CSS */
.no-underline {
  text-decoration: none;
}

请记得将CSS代码放到HTML文件的<head>部分中的<style>标签内，或者放到一个外部的CSS文件中，然后在HTML中通过<link>标签引入。

例如，使用<style>标签：

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remove Link Underline</title>
<style>
  /* 这里是CSS代码 */
  a {
    text-decoration: none;
  }
</style>
</head>
<body>

<!-- 这里是HTML链接 -->
<a href="https://www.example.com">Visit Example.com</a>

</body>
</html>

或者，使用外部CSS文件：

创建一个CSS文件（比如styles.css），并添加下面的CSS代码：

css
/* styles.css文件 */
a {
  text-decoration: none;
}

在HTML文件中引入这个CSS文件：

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remove Link Underline</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<!-- 这里是HTML链接 -->
<a href="https://www.example.com">Visit Example.com</a>

</body>
</html>

2024年6月29日 12:07 回复

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

shell
a, u {
  text-decoration: none;
}

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

shell
a {
  text-decoration: none !important;
}

2024年6月29日 12:07 回复

CSS 是

shell
text-decoration: none;

和

shell
text-decoration: underline;

2024年6月29日 12:07 回复

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

shell
a {
  text-decoration: none;
}

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

2024年6月29日 12:07 回复

最简单的选择是这样的：

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

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

shell
a {
    text-decoration: none;
}

或者甚至是 JS 文件中的这段代码：

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

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

2024年6月29日 12:07 回复

使用 CSS 删除text-decorations。

shell
a {
  text-decoration: none;
}

2024年6月29日 12:07 回复

6个答案

你的答案