为什么某些CSS属性不应用于：visited？ [英] Why are certain CSS properties not applied to a:visited?

问题描述

我的网站有一些链接样式，CSS如下：

  ：link {
 font-family：Verdana，Tahoma，Geneva，sans-serif; 
 text-decoration：none; 
 color：＃0676b3; 
} 
 
 a：visited {
 color：＃666; 
 text-decoration：underline; 
} 
 
 a：hover {
 color：#fff; 
 background：＃A5C2DB; 
 border-radius：.1875em; 
 padding：0 .1875em; 
} 
  

这里是 jsfiddle ，以显示他们是如何假设以查看其不同的状态：

  a {display：inline-block; margin：10px;} / *这些样式用于链接状态的呈现，它们不是样式表中的样式* / a.link {font-family：Verdana，Tahoma，Geneva，sans-serif; font-size：.875em; text-decoration：none; color：＃0676b3;} a.visited {color：＃666; text-decoration：underline;} a.hover {color：#fff;背景：＃A5C2DB; border-radius：0.1875em; padding：0 0.1875em;}  

 < a class = link> Regular Link< / a>< br />< a class =visited> Visited Link< / a>< br />< a class =hover链接< / a>  

：link = / p>

：visited =灰色文字带下划线

：hover =浅蓝色背景的白色文字

：link 和：hover 工作正常，但由于某种原因，：visited 状态拒绝显示下划线。在Chrome和Firefox中使用firebug或者检查器我可以看到：visited 的样式在行动，文本是灰色的，只有它拒绝下划线

解决方案

你没有做错什么 - 它只是不再这样工作。造型：访问被用作安全漏洞，因此浏览器制造商基本上取消了除了少数属性（例如color，background-color）之外的其他样式。

请参阅： http://hacks.mozilla.org / 2010/03 / privacy-related-changes-coming-to-css-vistited /

I have some link styles for our website and the CSS is as follows:

a:link {
    font-family: Verdana, Tahoma, Geneva, sans-serif;
    text-decoration: none;
    color: #0676b3;
}

a:visited {
    color: #666;
    text-decoration: underline;
}

a:hover {
    color: #fff;
    background: #A5C2DB;
    border-radius: .1875em;
    padding: 0 .1875em;
}

Here is a jsfiddle to show how they are supposed to look in their different states:

a {
  display: inline-block;
  margin: 10px;
}
/*  these styles are for presentation of the link states they are NOT the styles in my stylesheet*/

a.link {
  font-family: Verdana, Tahoma, Geneva, sans-serif;
  font-size: .875em;
  text-decoration: none;
  color: #0676b3;
}
a.visited {
  color: #666;
  text-decoration: underline;
}
a.hover {
  color: #fff;
  background: #A5C2DB;
  border-radius: 0.1875em;
  padding: 0 0.1875em;
}

<a class="link">Regular Link</a>
<br />
<a class="visited">Visited Link</a>
<br />
<a class="hover">Hovered Link</a>

:link = blue text no decoration

:visited = grey text underlined

:hover = white text with light blue background

The :link and :hover work fine but for some reason the :visited state refuses to show the underline. in Chrome and Firefox using firebug or the inspector I can see the :visited style in action and the text is grey in color, only it refuses the underline state.

Any ideas on what I'm doing wrong?

解决方案

You're not doing anything wrong - it just doesn't work that way (anymore). Styling of :visited was used as a security hole, so browser manufacturers basically eliminated alternate styling for :visited except for a handful of properties (e.g. 'color', 'background-color')

See: http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

这篇关于为什么某些CSS属性不应用于：visited？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！