Question

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

我遇到的问题是，一旦您访问该链接，Google Chrome就会显示a：访问过的颜色，而不是他孩子的特定颜色。

我以jsfiddle为例：http://jsfiddle.net/yvesvanbroekhoven/UTwgU

你可以看到Firefox和＆谷歌浏览器。点击链接，然后点击标题的颜色和＆amp;文字应该是红色/绿色，但在Chrome中它们会变成紫色。

有什么想法吗？

Answer 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

Answer 2

我的铬色是红色/绿色（v 14.0.835.202）！无论如何，您可以根据需要设置颜色：

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

Answer 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>

Chrome块级别链接颜色覆盖默认值

3 个答案: