将标题文本设置为链接后，其颜色更改为紫色，如何在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{}