Question

让我们想象一下非常简单的案例：

div.className{}

vs

.className{}

哪个选项更快，为什么？

Answer 1

由于css文件较小，

.className{}下载速度更快。

渲染页面时速度也更快，因为没有必要查找div个元素。

来自google的指南：

避免使用类型选择器限定ID和类名。除非   必要的（例如使用辅助类），不要使用元素名称   与ID或类一起使用。

避免不必要的祖先选择器对performance reasons非常有用。

Answer 2

div.classname与简称.classname之间的一个非常重要的区别在于selector specificity。它是一组规则，用于定义一旦浏览器开始浏览可能影响特定元素的所有选择器，哪个选择器会获得更多权重。

CSS最基本的规则是，选择器可以重新定义，无论定义是什么，最后会影响某个特定元素，也就是使用它的唯一例外。总是优先考虑。）

现在在上面的示例中，重新定义.class选择器实际上应该隐藏文本，但它仍然可见。如果我们说后面的规则总是优先的话，那怎么可能呢？因为div.classname规则具有比.box更高的特异性，因为它实际上获得了在其选择器声明（div.class）中包含元素（div）和类选择器（.class）的点。

当然div.class规则只适用于div元素，但由于类选择器通常是可重用的代码片段，因此在div上使用时有很多情况。

虽然官方W3规范中的规则并不难理解，但有时候很难记住。这就是为什么我想推荐一篇关于CSS选择器特异性的优秀文章，可以找到here。

在我看来，在跟踪CSS样式表的继承问题时，选择器特性是迄今为止最重要的事情。