链接标签中的颜色不起作用，但链接标签中的 div 中的颜色有效？答案

【问题标题】：Color in link tag doesn't work but color in div in link tag works?链接标签中的颜色不起作用，但链接标签中的 div 中的颜色有效？
【发布时间】：2017-06-07 21:16:35
【问题描述】：

为什么这不起作用（就文本颜色而言）：

.navbarDivText {
    color: #DAA520;
}
.navbarDiv {
    width: 150px;
    background-color: inherit;
    margin-left: 10px;
}


<li class="navbarDiv" >
   <a href="index.php" class = "navbarDivText">Main Page</a>
</li>

但这确实：

<li class="navbarDiv" >
   <a href="index.php">
     <div class = "navbarDivText">Main Page</div>
   </a>
 </li>

【问题讨论】：

我没有看到任何问题jsfiddle.net/beekvang/ep8dcqe4
可能你的链接<a>标签被覆盖了你的第一个例子。只需用 chrome 检查它即可检查
您的代码运行良好.. 我没有发现任何问题
向我们展示您的完整 html 和 css。
你希望这里的文字颜色是什么？

标签： html css twitter-bootstrap

【解决方案1】：

在这两种情况下，如果您为列表指定颜色，它将更改列表的颜色，并且默认情况下锚点保持蓝色并带有下划线。

如果您还想更改列表中锚点的颜色，您还应该为锚点提供样式意味着文本装饰和颜色任何您想要的样式。

请参见此处的示例，希望对您有所帮助。 Link

更多演示：Here

【讨论】：

【解决方案2】：

Bootstrap 可能会覆盖这个...

您需要更具体，例如

a.navbarDivText {
  color: #DAA520;
}

您可能必须使用：

a.navbarDivText {
  color: #DAA520!important;
}

如果由于某种原因不起作用...

【讨论】：

【解决方案3】：

附带说明，如果您使用的是 HTML5 文档类型，您应该只在 a 标记内放置一个 div，我想您就是这样。

当一个链接被点击时，浏览器会给它一个颜色来表明它已经被访问过。所以你可以试试下面的:visited 选择器。如果这不起作用，那么很可能另一种风格会覆盖您的风格。如 cmets 中所述，检查开发者控制台中的元素并查看您的样式是否被覆盖。

.navbarDivText:link, .navbarDivText:visited
{
   color: #DAA520;
}

【讨论】：

【解决方案4】：

对我来说很好，清除 cookie 并尝试。

.navbarDivText {
  color: #DAA520;
}

.navbarDiv {
  width: 150px;
  background-color: green;
  margin-left: 10px;
}

&lt;li class="navbarDiv"&gt;&lt;a href="index.php" class="navbarDivText"&gt;Main Page&lt;/a&gt;&lt;/li&gt;

也可以这样，

.navbarDiv a, a:visited {
  color: #DAA520;
}

或

.navbarDivText:link, .navbarDivText:visited {
  color: #DAA520;
}

【讨论】：