0

我正在查看以下样式表片段：

*:link,*:visited,*:hover,*:active,*:focus {
    transition: color .25s linear, background-color .25s linear, border-color .25s linear;
}

并且想知道性能影响是什么，尤其是在移动设备上？像“.ClassName:hover”这样更具体不是更好，还是性能差异没有问题？请您指教？

4

2 回答 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 回答