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

Question

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

JS FIDDLE

HTML

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

CSS版本1:

.wrap div{

   color: red;
}

CSS版本2:

div.wrap{

  color: red;
 }

Answer 1

div .wrap{
   color: red;
}

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

1. ID,例如#header
2. 类,例如.promo
3. 输入,例如div
4. 相邻的兄弟姐妹,例如h2 + p
5. 孩子,例如li> ul
6. 后裔,例如ul a
7. 通用,即*
8. 属性,例如[type ="text"]
9. 伪类/元素,例如:a:hover

*来源

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