Цвет ссылки уровня блока CSS переопределяется по умолчанию в Chrome

Question

У меня есть ссылки на уровне блоков, которые содержат другие элементы уровня блоков с другим цветом.

Проблема, с которой я столкнулся, заключается в том, что после того, как вы посетили эту ссылку, в Google Chrome отображается цвет: посещенный, а не конкретныйцвета его детей.

В качестве примера я сделал jsfiddle: http://jsfiddle.net/yvesvanbroekhoven/UTwgU

Вы можете увидеть разницу в Firefox и Google Chrome.Нажмите на ссылку, и тогда цвета заголовка и текста должны быть красными / зелеными, но в 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;
}

Демо здесь .

Answer 2

работает, как и ожидалось, в 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>

Answer 3

Это красный / зеленый в моем хроме (v 14.0.835.202)!В любом случае вы можете установить цвета, как вы хотите:

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