为什么浏览器会限制 :visited 选择器？答案

【问题标题】：Why did browsers limit :visited selector?为什么浏览器会限制 :visited 选择器？
【发布时间】：2017-03-11 14:16:11
【问题描述】：

我了解隐私问题，但在this article Mozilla 声明他们在对querySelector() 和getComputedStyle() 撒谎。

如果他们已经在向网站撒谎，那么为什么将 :visited 限制为仅使用简单的颜色？不能使用相同的方法对网站隐藏完整的样式吗？

【问题讨论】：

【解决方案1】：

限制可应用于访问链接的样式可防止它们以getComputedStyle() 可以查询的方式影响不相关元素的布局——如果不秘密计算整个页面的布局就无法进行欺骗，就好像所有链接都未被访问，这在性能方面将是极其昂贵的。这与不再应用 :visited + span 之类的东西是一样的（甚至在 :visited 中仍然允许的属性也不适用）。

考虑一下这个概念验证，您可以在其中单击链接来切换模拟其访问性的类名称，并了解在 :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

【讨论】：

谢谢。对于改变其他元素位置的样式是有意义的。有没有原因overlineline-throughunderlineshadowopacity等不影响其他元素的属性也被省略了？
@DD3R：不透明度会导致创建堆叠上下文，这会影响 z-index 布局。我不知道为什么文本装饰（text-decoration 和 text-shadow）不在允许的属性列表中。