如何刪除 html 超鏈接“a”標簽的默認鏈接顏色？

Question

默認鏈接顏色為藍色。 如何刪除 html 超鏈接標簽<a>的默認鏈接顏色？

Answer 1

繼承值：

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>

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;
}

我覺得有必要發布上面的 class 定義，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

您可以使用隨 CSS 2.0 引入的系統顏色 (18.2)值，但在 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>

這解決了覆蓋默認鏈接樣式的問題，並僅在我調用CSS 規則的地方刪除按鈕中的默認顏色、 hover 、焦點和活動樣式。

就這樣。

我希望這有幫助

Answer 10

a:link{color:inherit;}

這是簡單的一行可以為你做所有的事情<3

Answer 11

我也想刪除標簽的默認藍色鏈接顏色。 當我使用 bootstrap 版本 5 時，我決定在 bootstrap 文檔中尋找解決方案。 我搜索了“鏈接顏色”，結果是這個鏈接：“https://getbootstrap.com/docs/5.0/helpers/colored-links/”

bootstrap 5.0 版有一個 class 來自定義鏈接 colors，我發現這非常有幫助，而且我能夠毫不費力地更改“a”標簽的默認藍色。

希望這會有所幫助。

Answer 12

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

此代碼將顏色從默認更改為樣式中指定的顏色。 使用：hover，您可以更改 hover 上的默認文本顏色。

Answer 13

這將起作用

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

這樣做是刪除所有三個偽類的輪廓。