【问题标题】:How do I remove the default link color of the html hyperlink 'a' tag?如何删除 html 超链接“a”标签的默认链接颜色?
【发布时间】:2011-10-07 00:56:30
【问题描述】:

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

【问题讨论】:

标签: html css anchor


【解决方案1】:

inherit value:

a { color: inherit; } 

... 将导致元素呈现其父元素的颜色(我认为您正在寻找的颜色)。

现场演示如下:

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>

【讨论】:

    【解决方案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 属性的所有其他样式。你可以阅读更多关于它的信息here

    【讨论】:

    • 另外,如果你想防止特定链接在点击后改变颜色,请在a标签内添加:测试链接
    • &lt;a style="text-decorations:none; color:inherit;&gt; = 中奖
    • @DanBradbury 删除文本装饰中的“s”。 &lt;a style="text-decoration:none; color:inherit;&gt;
    【解决方案3】:

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

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

    【讨论】:

    • 有用但通用的模式如果不仔细计划可能会导致问题...谨慎使用
    【解决方案4】:
    .cancela,.cancela:link,.cancela:visited,.cancela:hover,.cancela:focus,.cancela:active{
        color: inherit;
        text-decoration: none;
    }
    

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

    【讨论】:

      【解决方案5】:

      这也是可能的:

      a {
        all: unset;
      }
      

      unset:这个关键字表示改变所有应用到的属性 元素或元素的父元素到它们的父值,如果它们是 如果不是,则可继承或为其初始值。 unicode-bidi 和 方向值不受影响。

      来源:Mozilla description of all

      【讨论】:

      • 可以,但仅仅因为你可以并不意味着你应该。我想说鉴于这条规则的性质,你真的应该多介绍一下它的实际作用。
      • 显然color: unset 也有效。我从元素中删除了框架颜色,然后包装了元素并在该包​​装器上设置了我的自定义颜色,以便继承颜色。
      【解决方案6】:

      只需将此添加到CSS

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

      就是这样,完成了。

      【讨论】:

      • 我不知道,反对票有什么问题,相信我这行得通...
      【解决方案7】:

      你必须使用CSS。下面是一个更改默认链接颜色的示例,当链接只是坐在那里时,当它被悬停时,当它是一个活动链接时。

      a:link {
        color: red;
      }
      
      a:hover {
        color: blue;
      }
      
      a:active {
        color: green;
      }
      &lt;a href='http://google.com'&gt;Google&lt;/a&gt;

      【讨论】:

        【解决方案8】:

        您可以使用 System Color (18.2) 值,该值随 CSS 2.0 引入,但在 CSS 3 中已弃用

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

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

        【讨论】:

          【解决方案9】:

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

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

          所以我创建了一个名为 custom.csscustom.scssCSS 文件。

          然后用以下属性定义一个新的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>
          

          这解决了覆盖默认链接样式的问题,并删除了默认的colorhoverfocusactive 按钮样式仅在我调用 CSS 规则的地方。

          就是这样。

          我希望这会有所帮助

          【讨论】:

            【解决方案10】:
            a:link{color:inherit;}
            

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

            【讨论】:

              【解决方案11】:
              <style>
              a {
              color:      ;
              }
              </style>
              

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

              【讨论】:

              • 请编辑您的答案,说明它是如何回答问题的,以便其他人学习。
              【解决方案12】:

              这会起作用

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

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

              【讨论】:

              • 请提供更多解释说明为什么会这样。
              • 问题不是在问大纲
              猜你喜欢
              • 1970-01-01
              • 2017-07-01
              • 2020-06-30
              • 2011-06-14
              • 2022-07-21
              • 2020-12-30
              • 2017-06-12
              • 2020-03-26
              • 2021-09-12
              相关资源
              最近更新 更多