如何删除 html 超链接“a”标签的默认链接颜色？

Question

默认链接颜色为蓝色。 如何去除 html 超链接标签的默认链接颜色

<a>

？

Answer 1

Answer 2

尝试这样的事情：

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

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

如果

text-decoration

不行，改成：

text-decoration: none !important;

!important

规则覆盖

text-decoration

属性的所有其他样式。你可以阅读更多关于它这里.

Answer 3

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

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

Answer 4

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

觉得有必要把上面的类定义贴出来，SO上的很多答案都漏掉了一些状态

Answer 5

这也是可以的：

a {
  all: unset;
}

unset：该关键字表示改变所有应用到的属性 元素或元素的父元素到它们的父值，如果它们是 可继承或如果不是他们的初始值。 unicode-bidi 和 方向值不受影响。

来源：Mozilla 对所有内容的描述

Answer 6

只需将此添加到

CSS

,

a {
    color: inherit;
    text-decoration: none;
}

就是这样，完成了

Answer 7

你必须使用

CSS

。这是更改默认链接颜色的示例，当链接只是坐在那里，当它悬停时以及当它是活动链接时。

a:link {
  color: red;
}

a:hover {
  color: blue;
}

a:active {
  color: green;
}

<a href='http://google.com'>Google</a>

Answer 8

您可以使用 System Color (18.2) 值，随 CSS 2.0 一起引入，但 在 CSS 3 中弃用。

a:link, a:hover, a:active { color: WindowText; }

这样您的锚链接将与该系统上的普通文档文本具有相同的颜色。

Answer 9

我在使用 Bootstrap 4 开发 Rails 6 应用程序时遇到了这个挑战。

我的挑战是我不希望这种样式覆盖应用程序中的默认链接样式。

所以我创建了一个名为custom.css或

custom.scss

的

CSS

文件。

然后定义一个新的CSS规则具有以下属性：

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

然后我在需要覆盖默认链接样式的任何地方调用此规则。

<div class="product-card__buttons">
  <button class="btn btn-success remove_link_colour" type="button"><%= link_to 'Edit', edit_product_path(product) %></button>
  <button class="btn btn-danger remove_link_colour" type="button"><%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %></button>
</div>

这解决了覆盖默认链接样式的问题，并删除了按钮中的默认colour、hover、focus和active样式，仅在我调用CSS规则的地方。

就这些了

希望对您有所帮助

Answer 10

a:link{color:inherit;}

这是简单的一行可以为你做所有的事情<3

Answer 11

我也想删除标签的默认蓝色链接颜色。 当我使用 bootstrap 版本 5 时，我决定在 bootstrap 文档中寻找解决方案。 我搜索“链接颜色”，结果是这个链接：“https://getbootstrap.com/docs/5.0/helpers/colored-links/”

bootstrap 5.0 版有一个自定义链接颜色的类，我发现这非常有帮助，而且我能够毫不费力地更改“a”标签的默认蓝色。

希望这对您有所帮助。

Answer 12

这里有两种删除默认链接颜色的方法：

方法一：使用内联CSS

<a href="https://example.com" style="color: black;">Link Text</a> 

方法二：使用CSS样式表

a {
  color: black;
}

Answer 13

<style>
a {
color:      ;
}
</style>

此代码将颜色从默认颜色更改为样式中指定的颜色。使用 a:hover，您可以更改悬停时文本的默认颜色。

Answer 14

这会起作用

    a:hover, a:focus, a:active {
        outline: none;
    }

这样做是删除所有三个伪类的轮廓。