CSS块级链接颜色覆盖Chrome中的默认值答案

【问题标题】：CSS block level link color overrides to default in ChromeCSS块级链接颜色覆盖Chrome中的默认值
【发布时间】：2012-03-25 11:01:02
【问题描述】：

我有块级链接，其中包含具有不同颜色的其他块级元素。

我遇到的问题是，一旦您访问了该链接，谷歌浏览器就会显示 a:visited 颜色，而不是他孩子的特定颜色。

我做了一个 jsfiddle 作为例子：http://jsfiddle.net/yvesvanbroekhoven/UTwgU

您可以看到 Firefox 和 Google Chrome 的区别。单击链接，然后标题和文本的颜色应为红色/绿色，但在 Chrome 中它们变为紫色。

有什么想法吗？

【问题讨论】：

显然这是特定版本的 Chrome (16.0.912.0 dev) 的问题。刚刚在较低版本中对其进行了测试，结果符合预期。

标签： css google-chrome

【解决方案1】：

这是无效的 HTML。您不能在内联元素中使用块级元素。将链接放在其他标签内：

<h1>
    <a href="http://google.com" target="blank">Title</a>
</h1>
<p>
    <a href="http://google.com" target="blank">Intro text</a>
</p>

CSS

h1 a  {
  color: red;
}

p a {
  color: green;
}

要设置已访问链接的样式，请使用：

p a:visited{
    color: green;
}
h1 a:visited {
    color: red;
}

Demo here.

【讨论】：

在 HTML 5 中，您可以这样做：html5doctor.com/block-level-links-in-html-5。也许确实我不得不把 display: block;在我的示例中的中。
你没有提到它是html5。是的，添加 display: block;到你的代码:)

【解决方案2】：

在我的 chrome (v 14.0.835.202) 中它是红色/绿色的！无论如何，您可以根据需要设置颜色：

a:visited p{
    color: green;
}
a:visited h1{
    color: red;
}

【讨论】：

【解决方案3】：

在 Chrome 17 中似乎可以正常工作。

如果a 链接样式没有继承到子块级元素，请尝试使用inherit，例如：

<header>
<style scoped>
a {background-color: #f9fda2;} /* highlight */
/* without inherit h1 won’t get the link’s background-color */
a h1 {background-color: inherit;}
</style>
  <a href="/">
    <h1>Title</h1>
    <p>meta</p>
  </a>
</header>

【讨论】：