通用选择器的使用及差异

Question

在Twitter启动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

根据在声明被更改的地方提交，将声明分成两部分，加快呈现速度。这是有意义的，因为通用选择器已经很慢了，所以让浏览器同时查找所有元素和所有伪元素会进一步减缓浏览器的速度。

我问了提交的开发人员，他为什么要做这个更改，他说，在测试中，分割这两个声明明显地提高了Safari和Chrome的渲染性能。(见他对提交页的评论)。但是，我没有从W3C或浏览器供应商那里找到任何文档，表明一种声明事物的方式应该比另一种方式更快。浏览器之间的性能差异似乎取决于呈现引擎是如何编写的。

之间的区别

:before, :after

和

*:before, *:after

的不同之处

.class

和

*.class

在这一点上几乎没有区别。如果有的话，用*限定类会减慢呈现速度。我相信*是为风格和可读性而添加的，没有真正的效果。

查看关于选择器和呈现速度的这篇文章。