從 CSS 中的連結中刪除藍色下劃線

1. 將 text-decoration 屬性設定為 none 以從 CSS 中的連結中刪除藍色下劃線
2. 使用偽類進行選擇以從 CSS 中的連結中刪除藍色下劃線
3. 刪除 box-shadow 屬性以從 CSS 中的連結中刪除下劃線和顏色

本教程將介紹去除 HTML 中超連結中形成的藍色下劃線的方法。我們將使用 CSS 來刪除這樣的下劃線。

將 text-decoration 屬性設定為 none 以從 CSS 中的連結中刪除藍色下劃線

我們可以使用 CSS 中的 text-decoration 屬性來指定文字的裝飾。該屬性是其他三個屬性的簡寫。這些屬性是 text-decoration-line、text-decoration-color 和 text-decoration-style。text-decoration-line 屬性應用文字裝飾，如上劃線、下劃線和穿線。text-decoration-color 屬性負責設定文字裝飾的顏色，text-decoration-style 將不同的樣式應用到文字裝飾中，例如純色、波浪形、虛線、虛線。當我們使用簡寫屬性 text-decoration 時，我們可以將值指定為 none。因此，我們可以將所有三個屬性都設定為 none。因此，它將刪除超連結中的下劃線並刪除藍色。

例如，建立一個帶有 container 類的 div。然後，在 div 中，使用類 thisPage 建立一個 span。接下來，在 span 標籤之間，寫入文字 Current Page。在下面的行中寫一個 anchor 標籤。將標籤的 href 屬性設定為 #。在 anchor 標籤內，用 otherPage 類編寫另一個 span。在 span 之間寫入文字 Next Page。然後在相應的 CSS 檔案中，選擇位於 container 類中的錨點標記為 .container a。使用十六進位制程式碼 #FF0000 為文字設定紅色。然後，將 text-decoration 屬性設定為 none。

下面的 CSS 會將文字 Next Page 設定為紅色，這是一個超連結。text-decoration 屬性設定為 none，將刪除 anchor 標籤元素的下劃線和藍色。

示例程式碼：

<div class="container">
    <span class="thisPage">Current Page</span>
    <a href="#"><span class="otherPage">Next Page</span></a>
</div>

.container a {
  color: #FF0000;
  text-decoration: none;
}

使用偽類進行選擇以從 CSS 中的連結中刪除藍色下劃線

我們將選擇偽類並應用與第一種方法相同的 CSS 屬性來從連結中刪除藍色下劃線。以前，我們只選擇了 anchor 標籤。在這個方法中，我們將使用偽類來選擇錨標籤。我們將使用像 :hover、:visited、:link 和 :active 這樣的偽類。:hover 類適用於使用者使用指標裝置（例如滑鼠）指向元素但不一定單擊元素的情況。:visited 類在連結已被點選時適用。同樣，:link 類選擇所有未訪問的連結。並且，:active 類選擇活動連結。在此方法中，我們將使用相同的 HTML 文件進行演示。

例如。使用偽類 :link、:visited、:hover 和 :active 選擇 anchor 標籤。用逗號分隔每個偽類。將 text-decoration 屬性設定為 none，並將 color 屬性設定為 #000000。

應用的 CSS 屬性將對以下示例中的所有偽類生效。a:link 選擇器將在未訪問連結時將超連結顏色更改為黑色並刪除下劃線。它覆蓋了所有其他選擇器中的 color 屬性。a:visited 選擇器將在連結被訪問後從連結中刪除下劃線。當我們將滑鼠懸停在連結上和單擊連結時，CSS 效果也會發生。通過這種方式，我們可以使用 CSS 偽類從連結中刪除下劃線和藍色。

示例程式碼：

<span class="thisPage">Current Page</span>
<a href="#"><span class="otherPage">Next Page</span></a>

a:link, a:visited,  a:hover, a:active
{
    color: #000000;
    text-decoration: none;
}

刪除 box-shadow 屬性以從 CSS 中的連結中刪除下劃線和顏色

有時，可以使用 box-shadow 屬性設定下劃線的樣式。我們可以使用該屬性為任何文字提供下劃線效果。以下 CSS 程式碼片段建立了一個下劃線。

box-shadow: inset 0 -3px 0 0 #bdb;

在這種情況下，如果我們想刪除下劃線，我們可以刪除 box-shadow 屬性，或者我們可以將該屬性的值設定為 none。

在下面的示例中，span 類的樣式為綠色，而 box-shadow 屬性用於建立紅色下劃線。然後，該屬性的值設定為 none，這會從文字中刪除下劃線效果。

示例程式碼：

<span class="thisPage">Current Page</span>

.thisPage {
  color: green;
  box-shadow: inset 0 -3px 0 0 red;
  box-shadow: none;
}