將標題文本設置為鏈接后，其顏色更改為紫色，如何在CSS中將其更改回？

Question

將標題徽標文本設置為鏈接后，它更改為這種顏色。 我無法終生以CSS為目標，如何將其顏色改回白色？ 請幫助，我已經嘗試了一切，但我不知道該怎么辦。 謝謝。

HTML：

 <header>
       <div class"container">
         <div id"branding">
          <a href="index.html"/>
           <h1><span class="highlight">Acme</span> Web Design</h1>
         </a>
         </div>

CSS：

header .highlight, header .current a {
  color: #e8491d;
  font-weight: bold;
}

header a:link {
  text-decoration: none;
}

header a:visited {
  text-decoration: none;
}

header a:active {
  text-decoration: none;
}

header a:hover {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

Answer 1

一些簡單的CSS應該可以解決您的問題，請嘗試以下操作：

#branding a { color: white; }

您只需要確保定位了正確的元素

哦，還要將<div id"branding">和<div class"container">修復為<div id="branding">和<div class="container">

Answer 2

您確實設置了顯式樣式，但是a:hover並不是顏色的來源，並且它不會覆蓋控制該顏色的規則。

每個瀏覽器都有一個內置的默認樣式表（“用戶代理樣式表”）。 這是默認樣式的來源。 您的瀏覽器會根據鏈接的狀態（訪問，未訪問，活動，集中）自動為鏈接着色。

為了覆蓋它，您只需要為鏈接設置選擇器（確實有）並在這些選擇器中設置顏色。

a         { text-decoration:none; } /* no underlines on any links */
a:link    { color:blue; }           /* links not in the browser's history */
a:visited { color:purple; }         /* visited links in the browser's history */
a:active  { color:red; }            /* links that are in the process of being clicked */
a:focus   { text-decoration:underline; }  /* links that have been focused */

而且，當然，請記住，即使這些樣式也可以被您可能擁有的更具體的樣式所覆蓋，所以您可能需要調整這些選擇器。

Answer 3

嘗試添加color: #e8491d; 到a:visited 。 這樣可以確保訪問鏈接時顏色不會改變。

Answer 4

由於CSS，文本的“原始”顏色看起來像黑色，因此，為了返回到添加鏈接之前文本的顏色，正確的做法是：

header a:link {
  text-decoration: none;
  color:initial
}

當心：

#branding a { color: white; }

導致使用您“重寫”我在您的CSS中看到的偽類的專有屬性，例如以下翻轉效果：

header a:hover {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

因此，如果您不想設置元素的每個狀態，則最好刪除偽類，如果需要，將所有內容歸為一組：

    #branding a { 
     color: white;
     text-decoration: none;
     font-weight: bold;
     }

不要忘記清理HTML，這是正確的：

<header>
       <div class="container">
         <div id="branding">
          <a href="index.html">
           <h1><span class="highlight">Acme</span> Web Design</h1>
         </a>
        </div>
       </div>
</header>

Answer 5

放

color:white;

內

header a:link{}