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

Question

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

JS FIDDLE

HTML

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

CSS 版本1：

.wrap div{

   color: red;
}

CSS Version 2：

div.wrap{

  color: red;
 }

Answer 1

div .wrap{
   color: red;
}

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

1. ID，例如的#header
2. 类，例如.promo
3. 类型，例如格
4. 相邻的兄弟姐妹，例如h2 + p
5. 儿童，例如li> UL
6. 后裔，例如ul a
7. 环球，即*
8. 属性，例如[类型= “文本”]
9. 伪类/元素，例如一个：悬停

* Source

您可能还希望阅读this great article at MDN（and this one as an update to that）

Answer 2

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

如果有10个divs和100个.wrap个实例，那么请使用版本2，因为要测试的div少于.wrap。

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