转换CSS在*：link，*：visited，*：hover，*：active，*：focus的性能

Question

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

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

想知道性能影响是什么，特别是在移动设备上？ 像“.ClassName：hover”这样更具体的不是更好，还是性能差异没问题？ 请您的意见？

Answer 1

首先，我想知道您为什么要使用它，您是否希望页面上的每个元素都应分配transition颜色，border-color :hover ，:active州......？因为这将应用于所有元素，所以hovered，focused，link和visited的位置将应用于a代码。

如果要将上述样式应用于链接，则应使用

a:link, a:visited ...

此外，当您使用*时，它将成为您网页的昂贵选择器。所以只在需要时使用它。

^{1。 Good Read For Selector Performance
2。 Testing Page Efficiency}

---

与*相比，性能肯定会降低，使用特定（非特定）选择器将是一个更好的选择，虽然我仍然觉得你将使用的选择器不是你需要的，你必须是定位a元素而不是所有元素。

Answer 2

使用*选择器会导致渲染花费更长的时间，因为页面上的每个元素都会匹配一个额外的项目，其中一个选项器非常具体，需要更多的处理能力才能找到。它增加了CSS文件的解析时间，以及渲染页面本身之前的延迟。浏览器在某种程度上可以弥补代码，但即使在更好的浏览器上，它仍然会很痛苦。

在您的情况下，您选择的样式涉及伪类悬停，活动等。这些都基于事件，因此您不仅要阅读整个文档而不是必要，您实际上是将事件绑定到它们，这将需要存储在内存中。

除此之外，样式本身就是一种过渡，并且在调用这些事件时需要额外的处理能力。

此外，将转换应用于伪类意味着它实际上甚至不起作用，因为除了已经改变的[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 */
}

即便如此，我还是有理由相信你可能不需要焦点，也许还有活跃的伪类。