2017-03-11 37 views

回答

2

限制可应用于已访问链接的样式可防止它们以可通过getComputedStyle()查询的方式影响无关元素的布局,这种方式不会在没有秘密计算整个页面布局的情况下欺骗链接未被访问,这在性能方面将非常昂贵。这与:visited + span不再适用(甚至在:visited中仍然允许的属性不一样)。

考虑这方面的证据的概念,在其中您可以点击一个链接切换模拟其visitedness类的名称,并了解:link:visited之间切换会影响布局:

var a = document.querySelector('a'), 
 
    p = document.querySelector('p + p'); 
 

 
a.addEventListener('click', function(e) { 
 
    a.className = a.className == 'unvisited' ? 'visited' : 'unvisited'; 
 
    console.log('a is now ' + a.className + '; top pos of following p is now ' + p.getBoundingClientRect().top); 
 
}, false);
a.unvisited { 
 
    font-size: 1em; 
 
} 
 

 
a.visited { 
 
    font-size: 2em; /* A property not normally allowed on :visited */ 
 
}
<p><a class="unvisited" href="#">Toggle visitedness</a> 
 
<p>Another paragraph

+0

谢谢。对于改变其他元素位置的样式有意义。是否有一个原因'overline''直通''下划线'阴影''不透明'和其他属性不影响其他元素也被忽略? – DD3R

+0

@ DD3R:不透明会导致创建可能影响z-index布局的堆叠上下文。我不知道为什么文本装饰(文字修饰和文字阴影)不在允许的属性列表中。 – BoltClock