將CSS塊級鏈接顏色覆蓋爲Chrome中的默認設置

我有塊級別的鏈接，其中包含具有不同顏色的其他塊級別元素。將CSS塊級鏈接顏色覆蓋爲Chrome中的默認設置

我的問題是，一旦你訪問該鏈接谷歌瀏覽器顯示a：訪問顏色，而不是他的孩子的具體顏色。

我做了的jsfiddle爲例：http://jsfiddle.net/yvesvanbroekhoven/UTwgU

你可以看到在Firefox &谷歌瀏覽器的差異。點擊鏈接，然後它的標題顏色&文本應該是紅色/綠色，但在Chrome中它們變成紫色。

任何想法？

來源

2011-10-19 Yves Van Broekhoven

顯然，這是一個問題特定版本的Chrome（16.0.912.0 dev）。剛剛在較低版本中進行了測試，結果如預期的那樣。 –

這是我的鉻（v 14.0.835.202）中的紅色/綠色！反正你可以設置顏色，只要你想：

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

來源

2011-10-19 09:47:55

這是無效的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。

來源

2011-10-19 09:51:21 Kyle

在HTML 5中，您可以這樣做：http://html5doctor.com/block-level-links-in-html-5/。也許的確我必須把display：block;在我的例子中。 –

你沒有提到它是html5。是的，添加顯示：塊;到你的代碼:) – Kyle

我的不好。更新了示例。 –

似乎按預期在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>

來源

2012-03-25 03:01:02

將CSS塊級鏈接顏色覆蓋爲Chrome中的默認設置

回答

相關問題