我需要將a:visited CSS設置為普通a設置的任何顏色。
我希望能夠告訴瀏覽器的是,對于已訪問的鏈接,使用與未訪問的鏈接相同的顏色,無論它是什么顏色。
我需要在不指定特定顏色的情況下做到這一點。
比如,如果一些奇怪的瀏覽器使用“綠色”作為普通未訪問鏈接的顏色,這個CSS應該指示瀏覽器對已訪問的鏈接使用同樣的綠色。瀏覽器使用什么顏色對我的代碼應該是透明的..因此有了“無論什么顏色”這個短語。
我知道如何將a:visited和a設置為特定的顏色。我問的不是這個。
P.P.S .如果有必要,我愿意使用JavaScript。但是我真的很想讓瀏覽器做到這一點。
你問我為什么要做這種事?
IE8用于鏈接的藍色有點酷。不是# 0000FF。這是一種很好的藍色。所以我想為已訪問和未訪問的鏈接設置它。但是我不應該每次都抓圖或者使用一些插件來檢查準確的十六進制值。如果IE稍后將顏色更改為其他很棒的顏色,這段代碼應該可以正常工作。我不想再次找到這個十六進制,并在我的代碼中修改它。
這只是一個原因。不要給我藍色的魔法。找出這一點很容易,但這不是答案!
當然了。
我需要這個,因為一些文本鏈接(相對于圖片鏈接)是我的項目主菜單的主要部分,所以我希望它們是我的顏色,而不是瀏覽器的顏色!
每個鏈接都包含在一個p標簽組中,該標簽組的類在CSS中有一個特定的顏色(我的顏色)設置。
處理這個問題的最新標準方法是使用CSS4系統顏色鏈接文本,正如@EricLaw在對我的原始答案的評論中指出的那樣。這似乎得到了廣泛的支持,但如果感興趣的瀏覽器不支持,您可以嘗試Danny Robers的腳本。
我不認為有一個純粹的CSS解決方案。通常你會選擇一種顏色,并將a:link和a:visited設置為相同的顏色。
我試過{color: inherit}但是沒用。
盡管如此,這個jQuery解決方案工作得很好。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var normalColor = $('a:link').css('color');
$('a:visited').css('color', normalColor);
});
</script>
</head>
<body>
<a >Google</a>
<a href="nowhereyouvebeen">No where you've been</a>
</body>
</html>
使用CSS無法做到這一點。瀏覽器基于只有它知道的數據庫條目指示一個鏈接已經被訪問,然后使用特定瀏覽器配置中指定的默認顏色。
CSS實際上無法獲得頁面上某些東西的顏色。事情就是這樣。唯一的辦法就是像丹尼·羅伯茨的回答一樣用javascript。
我認為他的回答不正確的原因是$('a:visited ')只是選擇了在那個時間點所有訪問過的鏈接,然后改變了它們的顏色。
您需要做的是觀察點擊事件,并每次重新運行代碼:
var normalColor = $('a:link').css('color');
$('a').click(function() {
$('a:visited').css('color', normalColor);
});
我不認為有一個純粹的CSS方式來實現這一點。我認為您需要使用JavaScript來獲取a的顏色,然后將a:visited設置為該顏色,這可能不適用于所有瀏覽器,除非指定了a{color:#dea}。
轉眼間:
$(function(){
var sheet = document.styleSheets[document.styleSheets.length-1];
sheet.insertRule(
'a:visited { color:'+$('a:link').css('color')+'; }',
sheet.length
);
});
我已經測試過了,可以確認這在Chrome上是可行的。但是請記住,您要將規則添加到哪個表單,確保它的媒體屬性適用于您關心的媒體。此外,如果你有任何覆蓋a顏色的規則,這可能無法正常工作——所以要確保你的樣式表沒有這種情況。
我不確定這是不是一個明智的做法。就我個人而言,我總是明確定義每個網站的鏈接顏色。
PS:
顯然IE(不知道哪個版本)堅持自己的語法:
sheet.addRule('a:visited', $('a:link').css('color'), -1);
我這樣做:
a, a:visited { color:#4CA1F6; }
a:hover { color:#4CB6E1; } a:active { color:#0055AA; }
既然這個帖子讓我思考,我對我的方法做了以下改進:
a:link, a:visited { color:#4CA1F6; }
a:hover, a:focus { color:#4CB6E1; }
a:active { color:#0055AA; }
我需要一個解決方案,正如這個問題的標題所暗示的那樣“設置訪問過的鏈接的顏色為未訪問過的鏈接的顏色”。對我來說,我需要一種方法來執行瀏覽器頁面內容屏幕截圖的圖像比較,我用它來進行回歸測試(pdiff - perceptual diff)。下面是為我工作的代碼。
(function(){
var links = document.querySelectorAll('a');
for (var i=0; i<links.length; i++) {
var link = links[i];
if (link.href) { //must be visitable
var rules = window.getMatchedCSSRules(link) || [];
var color = '#0000EE' //most browsers default a:link color;
for (var j=0; j<rules.length; j++) {
var rule = rules[j];
var selector = rule.selectorText;
color = rule.style['color'] || color;
}
link.setAttribute('style','color:' + color + ' !important');
//this was enough for me but you could add a 'a:visited' style rule to the rule set
}
}
})();
感謝貢獻一個堆棧溢出的答案!
請務必回答問題。提供詳細信息并分享您的研究!但是要避免…
尋求幫助、澄清或回應其他答案。根據意見發表聲明;用參考資料或個人經歷來支持他們。要了解更多,請查看我們關于撰寫精彩答案的提示。