我正在查看以下样式表片段：
*:link,*:visited,*:hover,*:active,*:focus {
transition: color .25s linear, background-color .25s linear, border-color .25s linear;
}
并且想知道性能影响是什么，尤其是在移动设备上？像“.ClassName:hover”这样更具体不是更好，还是性能差异没有问题？请您指教？
问问题
2561 次
2 回答
2
首先，我想知道您为什么要使用它，您是否希望页面上的每个元素都应分配transition给颜色、border-color打开:hover、:active状态......？因为这将应用于所有元素，when hovered, focused, where aslink和visited将应用于a标签。
如果要将上述样式应用于链接，则应使用
a:link, a:visited ...
此外，当您使用 时*，它将成为您网页的昂贵选择器。因此，仅在需要时使用它。
1.良好的选择器性能阅读
2.测试页面效率
性能肯定会下降，与 相比，使用特定（而不是过度特定）选择器将是一个更好的选择*，尽管我仍然觉得您将使用的选择器不是您所需要的，您必须针对a元素而不是所有元素。
于 2013-10-22T11:27:37.933 回答
1
任何使用 * 选择器都会导致渲染时间显着延长，因为页面上的每个元素都将匹配一个额外的项目，选择器对其不够具体，需要更多的处理能力才能找到。它增加了 CSS 文件的解析时间，以及页面本身呈现之前的延迟。浏览器在某种程度上可以弥补代码的不足，但即使在更好的浏览器上，它仍然会很痛苦。
在您的情况下，您选择的样式涉及伪类悬停、活动等。这些是基于事件的，因此您不仅需要阅读整个文档，而且本质上是将事件绑定到它们，这将需要要存储在内存中。
此外，样式本身就是一个过渡，调用这些事件时需要额外的处理能力。
此外，将过渡应用到伪类意味着它实际上甚至不起作用，因为在背景颜色已经改变之前不会应用过渡，除了 a[href] 项目，它已经从*:link 选择器。
这段代码要便宜得多，并且可以实现您想要做的事情：
a[href] {
transition: color .25s linear, background-color .25s linear, border-color .25s linear;
}
a[href]:hover, a[href]:active, a[href]:focus {
background-color: /* New colour */
border-color: /* New colour */
color: /* New colour */
}
即使那样，我也有理由确定您可能不需要焦点，也许不需要活动的伪类。
于 2013-10-22T11:41:00.477 回答