css - 转换 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 元素而不是所有元素。