CSS选择器，标记名+类与类(CSS selectors, tagname + class vs class)

CSS选择器，标记名+类与类(CSS selectors, tagname + class vs class)

让我们想象非常简单的情况：

div.className{}

VS

.className{}

哪个选项更快，为什么？

Lets imagine very simple case:

div.className{}

vs

.className{}

Which option is faster and why ?

最满意答案

.className{}下载速度更快，因为css文件的大小较小。

渲染页面时速度也更快，因为不需要查找div元素。

来自谷歌的指南：

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

出于性能原因，避免使用不必要的祖先选择器很有用。

.className{} is faster in downloading, because of smaller size of the css file.

It is also faster when rendering page, because it is not necessary to look for div elements.

A guideline from google:

Avoid qualifying ID and class names with type selectors. Unless necessary (for example with helper classes), do not use element names in conjunction with IDs or classes.

Avoiding unnecessary ancestor selectors is useful for performance reasons .