如何删除html超链接a标记的默认链接颜色

7 个月前提问

3 个月前修改

浏览次数181次

7个答案

在HTML中，超链接（a 标签）默认会有特定的颜色，通常未访问的链接是蓝色，而访问过的链接是紫色。如果你想要删除或者改变这些默认颜色，可以使用CSS。

以下是一个简单的CSS示例来改变链接颜色：

css
/* 未访问的链接 */
a:link {
    color: inherit; /* 这将使链接颜色继承父元素的颜色 */
    text-decoration: none; /* 这将移除下划线 */
}

/* 访问过的链接 */
a:visited {
    color: inherit; /* 同上 */
    text-decoration: none; /* 同上 */
}

/* 鼠标悬停状态 */
a:hover {
    color: inherit; /* 你可以在这里设置悬停时的颜色，或者保持继承 */
    text-decoration: underline; /* 在悬停时显示下划线，这是可选的 */
}

/* 鼠标激活点击状态 */
a:active {
    color: inherit; /* 你可以在这里设置点击时的颜色，或者保持继承 */
    text-decoration: none;
}

这段CSS代码可以应用到你的HTML文档的<head>部分或者一个外部的CSS文件中。inherit值意味着链接的颜色将不再是浏览器默认的蓝色或紫色，而是会继承其父元素的字体颜色。text-decoration: none;用于移除链接的下划线，但你可以根据需要来调整这些属性。

例如，如果你的HTML文档中有一个段落，你希望其中的链接没有默认的蓝色或紫色，看起来就像普通文本一样，你可以这样做：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 这里是之前提供的CSS代码 */
        a:link, a:visited, a:hover, a:active {
            color: inherit;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p style="color: black;">这是一个段落，里面有一个<a href="https://www.example.com">链接</a>，它看起来应该和其他文本一样。</p>
</body>
</html>

在这个例子中，<a> 标签内的文本将显示为与周围文本相同的颜色，并且没有下划线，除非鼠标悬停在链接上时，你可以设置显示下划线。这样，链接看起来就和普通的文本没有区别了。

简言之，通过使用CSS，你可以轻松地改变或删除超链接的默认颜色和下划线，以符合你的设计需求。

2024年6月29日 12:07 回复

继承值：

shell
a { color: inherit; }

...将导致该元素呈现其父级的颜色（这就是我认为您正在寻找的）。

现场演示如下：

显示代码片段

shell
a {
  color: inherit;
}

<p>The default color of the html element is black. The default colour of the body and of a paragraph is inherited. This
  <a href="http://example.com">link</a> would normally take on the default link or visited color, but has been styled to inherit the color from the paragraph.</p>

Run code snippetHide results

Expand snippet

2024年6月29日 12:07 回复

尝试这样的事情：

shell
a {
    color: #0060B6;
    text-decoration: none;
}

a:hover {
    color:#00A0C6; 
    text-decoration:none; 
    cursor:pointer;  
}

如果text-decoration不起作用，请将其更改为：

shell
text-decoration: none !important;

该!important规则会覆盖该属性的所有其他样式text-decoration。你可以在这里读更多关于它的内容。

2024年6月29日 12:07 回复

如果您不想看到浏览器提供的下划线和默认颜色，可以将以下代码保留在 main.css 文件的顶部。如果您需要不同的颜色和装饰样式，您可以使用下面的代码片段轻松覆盖默认值。

shell
 a, a:hover, a:focus, a:active {
      text-decoration: none;
      color: inherit;
 }

2024年6月29日 12:07 回复

.cancela,.cancela:link,.cancela:visited,.cancela:hover,.cancela:focus,.cancela:active{ color: inherit; text-decoration: none; }

我觉得有必要发布上面的类定义，SO上的许多答案都遗漏了一些状态

2024年6月29日 12:07 回复

这也是可能的：

shell
a {
  all: unset;
}

unset：此关键字指示将应用于该元素或该元素的父元素的所有属性更改为它们的父值（如果它们是可继承的），否则更改为它们的初始值。 unicode-bidi 和方向值不受影响。

来源：Mozilla 的所有描述

2024年6月29日 12:07 回复

在CSS中，您可以通过设置 a 标签的 color 属性来删除超链接的默认链接颜色。默认情况下，未访问的链接是蓝色的，而已访问的链接则是紫色的。如果您想要超链接看起来不像传统的链接，您可以指定一个颜色值，甚至可以将其设置为与文本相同的颜色。

以下是一段CSS代码，展示了如何为超链接设置不同状态下的颜色：

css
/* 未访问的链接 */
a:link {
    color: black; /* 或者可以是任何颜色，例如#000000或者rgba(0,0,0,1) */
    text-decoration: none; /* 这会删除下划线 */
}

/* 已访问的链接 */
a:visited {
    color: black; /* 设置成和未访问链接一样的颜色 */
    text-decoration: none;
}

/* 鼠标悬浮在链接上 */
a:hover {
    color: gray; /* 或者你想要的任何颜色 */
    text-decoration: underline; /* 可选：鼠标悬浮时添加下划线 */
}

/* 鼠标点击链接的那一刻 */
a:active {
    color: red; /* 或者你想要的任何颜色 */
    text-decoration: none;
}

在上面的例子中，我将所有链接都设置成了黑色，并且移除了下划线，这样链接在视觉上就不再显示为传统的蓝色或紫色带下划线的文本。同时，我也添加了 :hover 和 :active 状态的样式，以便在用户与链接交互时提供视觉反馈。当然，您可以根据您的设计需求自由地修改这些属性值。

2024年6月29日 12:07 回复

如何删除html超链接a标记的默认链接颜色

7个答案

你的答案