CSS 选择器性能问题

Question

我注意到如果我们在一个选择器中选择了很长的 DOM 树，transitions 会滞后。

喜欢:

#wrapper #content #box-container #boxer .box:hover .transition { 
    /* styles here */
}

否则，如果我这样使用选择器:

.box:hover .transition {
    /* styles here */
}

它运行良好，不滞后.这是真的还是我的文档设置有问题？

Answer 1

一个 ID 应该在一个页面上只存在一次，所以这就足够了:

#boxer .box:hover .transition { 
    /* styles here */
}