Question

假设我们有这样的样式声明：

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

我理解它的方式，解析器会找到所有标签，过滤哪些标签跟随一个悬停的input，它是div的直接后代，body是{{1}}的直接后代

我很想知道的是，只要输入的悬停状态发生变化，或者只有一个文档加载（放在某种查找表中），是否会这样做。

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

Answer 1

参考这个post的答案，CSS性能差异并不显着。但是，如果使用jQuery之类的JS库来选择元素，那么如果使用相同的选择器，性能会有很大差异。

此外，如果CSS缩小或不缩小，性能会有所不同，合并为1个文件/多个文件。

理论上，在慢速Internet连接中，CSS文件大小也会影响加载性能，但CSS的文件大小通常非常小，因此可以安全地忽略它，除非您关注具有56K调制解调器的用户。