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 回复

使用 CSS 删除text-decorations。

shell
a {
  text-decoration: none;
}

2024年6月29日 12:07 回复

4个答案

你的答案