css - "slow"CSS 选择器何时会影响性能？

Question

假设我们有这样一个样式声明:

body > div > input:hover ~ label {
    color: red;
}

按照我的理解，解析器会找到所有标签，过滤哪些标签跟随悬停的 input 这是 div 的直接后代正文。

我想知道的是，这是否会在输入的悬停状态发生变化时完成，或者仅在加载一个文档(放置在某种查找表中)时完成。

如果我想使用大量、复杂的选择器(出于不相关的原因)，页面在状态和效果之间的呈现会变慢，还是只会影响页面的初始加载时间？

Answer 1

引用这个post的答案, CSS 性能差异并不显着。但是，如果您使用 jQuery 等 JS 库来选择元素，则如果使用相同的选择器，性能会有很大差异。

此外，如果 CSS 是否被缩小，合并到 1 个文件/多个文件中，性能会有所不同。

理论上，在网速较慢的情况下，CSS 文件大小也会影响加载性能，但 CSS 文件通常很小，因此可以放心地忽略它，除非您担心那些使用 56K 调制解调器的用户。