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

use*_*265 2 html css

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

JS FIDDLE

HTML

<div class="wrap">
    <div> hallo </div>    
</div>
Run Code Online (Sandbox Code Playgroud)

CSS版本1:

.wrap div{

   color: red;
}
Run Code Online (Sandbox Code Playgroud)

CSS版本2:

div.wrap{

  color: red;
 }
Run Code Online (Sandbox Code Playgroud)

SW4*_*SW4 6

div .wrap{
   color: red;
}
Run Code Online (Sandbox Code Playgroud)

通常会更快,假设没有未提及的先前嵌套级别且相对唯一性级别.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上阅读这篇精彩的文章(这篇文章作为更新)