Question

在Twitter Bootstrap CSS中，您会看到：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

:before, :after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

之间的区别是什么：

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

更具体地说，我问的是选择器之间的差异：

:before, :after

和

*:before, *:after

另外 - 如果它们都是相同的，为什么他们分开并重复它？它需要更多的CSS。如果它们是相同的，它确实不会更短。

Answer 1

根据commit where the declaration was changed分割声明的两种加速渲染方式。这是有道理的，因为通用选择器已经很慢，因此使浏览器查找所有元素，同时所有伪元素都会进一步减慢浏览器的速度。

我问开发人员，他做出了改变的原因，他说在测试过程中拆分这两个声明显着提高了Safari和Chrome中的渲染性能。（见他对commit page的评论）。但是，我还没有能够从W3C或浏览器供应商处找到任何文档，表明声明事物的一种方式应该比另一种更快。浏览器之间的性能差异似乎取决于渲染引擎的编写方式。

之间的区别

:before, :after

和

*:before, *:after

类似于

之间的区别

.class

和

*.class

因为几乎没有区别。如果符合*的类的任何内容都会降低渲染速度。我相信*是为了风格和可读性而添加的，并没有真正的效果。

查看有关选择器和渲染速度的this article。

通用选择器的使用和差异

1 个答案: