合格的CSS选择器，什么更有效？

I wonder which of the following CSS declaration is more efficient and why?

我想知道以下哪个CSS声明更有效,为什么?

HTML

<div class="wrap">
    <div> hallo </div>    
</div>

CSS Version 1:

CSS版本1:

.wrap div{

   color: red;
}

CSS Version 2:

CSS版本2:

div.wrap{

  color: red;
 }

2 个解决方案

#1

div .wrap{
   color: red;
}

Will typically be faster, assuming there are no levels of prior nesting not referred to and the level of relative uniqueness of .wrap is higher than that for div, as browsers interpret and filter selectors right-to-left, typically the level of selector efficiency goes*:

通常会更快,假设没有未提及的先前嵌套级别且.wrap的相对唯一性级别高于div的级别,因为浏览器从右到左解释和过滤选择器,通常是选择器效率的级别去*:

ID, e.g. #header

ID,例如的#header

Class, e.g. .promo

等级,例如.promo

Type, e.g. div

类型,例如DIV

Adjacent sibling, e.g. h2 + p

相邻的兄弟姐妹,例如h2 + p

Child, e.g. li > ul

孩子,例如li> ul

Descendant, e.g. ul a

后裔,例如, ul a

Universal, i.e. *

环球,即*

Attribute, e.g. [type="text"]

属性,例如[类型= “文本”]

Pseudo-classes/-elements, e.g. a:hover

伪类/元素,例如答:悬停

*Source

You may want to also have a read of this great article at MDN (and this one as an update to that)

您可能还希望在MDN上阅读这篇精彩文章(并将此文章作为更新)

#2

This depends on how many divs you have and how many instances of the .wrap class you have created.

这取决于您拥有多少div以及您创建的.wrap类的实例数。

If there are 10 divs and 100 .wrap instances then go with version 2, as there are fewer div to test than .wrap.

如果有10个div和100个.wrap实例,则使用版本2,因为测试的div比.wrap少。

How ever I suppose the lookup may be implementation dependent.

我怎么认为查找可能依赖于实现。

#1

div .wrap{
   color: red;
}