CSS选择器及其优先级

一：一些普通的选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="MyCss.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- 派生选择器实例  -->
<a>这是一个div外部a标签的样式</a>
<div>
    <a>这是一个div内部a标签的样式</a>
    <h2>css基础语法</h2>
</div>

<!--id选择器与派生选择器实例 -->
<a href="https://www.baidu.com/" > 百度不变色</a>
<div id="divid">
    <a href="https://www.baidu.com/" >百度变色</a>
</div>
<br />

<!--类选择器-->
<div id="divclass" class="divclss">
    div类选择器实例
</div>
<br />

<!--属性选择器-->
<p title="t1"> 属性选择器</p>
<!--和body指定的颜色一样-->
<p title="t2"> 属性选择器</p>
</body>
</html>

 

h2,a,h1{
    color:red;
}
body{
    color:yellow;

}
div a{
    color: blue;
}
#divid a{
    color:darkred;
}
.divclss{
    color:chartreuse;
}
[title = t1]
{
    color: mediumvioletred;
}
/*这个要按顺序来*/
div a:link    {color:blue;}
div a:visited {color:blue;}
div a:hover   {color:red;}
div a:active  {color:yellow;}
/*id选择器的优先级比类型选择器优先级高*/

 

效果截图：

二：优先级实例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*标签选择器*/
        div { color: blue } /*绿色*/
        /*类选择器*/
        .a1 { color:yellow } /*黄色*/
        /*类派生选择器*/
        .a1 div {color:purple} /*紫色*/
        /*id选择器*/
        #id1{ color: cyan} /*青色*/
        #id2{ color: cyan} /*青色*/
        #id3{ color: cyan} /*青色*/
        /*id派生选择器*/
        #id2 div{ color: red} /*红色*/

    </style>
</head>
<body>
<div id="id1" class="a1"> 我是青色的  id选择器优先级高于类选择器 </div>

<div class="a1">
    <div class="a1">我是紫色的 类派生选择器优先级高于所有类选择器</div>
    <div id="id2">我是青色的 id选择器优先级高于类派生选择器
        <div id="id3">
            我是红色的而不是青色的 id派生选择器优先级高于id选择器
        </div>
    </div>
</div>
</body>
</html>

 

 效果图：

 

3：更加专业点的优先级判断

（原博客地址   ： http://www.cnblogs.com/aaronjs/p/3156809.html#_h2_1  ）

计算指定选择器的优先级:重新认识CSS的权重

  1. 通配选择符的权值 0,0,0,0
  2. 标签的权值为 0,0,0,1
  3. 类的权值为 0,0,1,0
  4. 属性选择的权值为 0,0,1,1 0,0,1,0
  5. 伪类选择的权值为 0,0,1,0
  6. 伪对象选择的权值为 0,0,0,1
  7. ID的权值为 0,1,0,0
  8. important的权值为最高 1,0,0,0

使用的规则也很简单，就是 选择器的权值加到一起，大的优先；如果权值相同，后定义的优先 。虽然很简单，但如果书写的时候没有注意，很容易就会导致CSS的重复定义，代码冗余。

从上面我们可以得出两个关键的因素：

  1. 权值的大小跟选择器的类型和数量有关
  2. 样式的优先级跟样式的定义顺序有关

 

一篇文章 256个class类名选择器干掉一个id选择器实例页面

http://www.zhangxinxu.com/study/201208/256-class-fire-an-id.html

 

 

给出的答案是:所有的类名(classes)都是以8字节字符串存储的。8字节所能hold的最大值就是255. 当同时出现256个class, 势必会越过其边缘，溢出到id区域。

 

总结：

比较同一级别的个数，数量多的优先级高，如果相同即比较下一级别的个数 ，至于各级别的优先级，大家应该已经很清楚了，就是：

important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 通配符 > 继承

这也就解释了为什么11个标签的定义会比不上1个类的定义，1个类加11个标签会比不上2个类的权重高。

 

 

选择器种类

查阅资料归纳下大概有如下几种：

  • 通配选择器

  • 类型选择器

  • ID选择器

  • 类选择器

  • 包含选择器

  • 子元素选择器

  • 相邻兄弟选择器

  • 属性选择器

css1-css3提供非常丰富的选择器，但是由于某些选择器被各个浏览器支持的情况不一样，所以很多选择器在实际css开发中很少用到

 

关于CSS的执行效率：

  1. 样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。
  2. 如果你非常在意页面的性能那千万别使用CSS3选择器。实际上，在所有浏览器中，用 class 和 id 来渲染，比那些使用同胞，后代选择器，子选择器（sibling, descendant and child selectors）对页面性能的改善更值得关注。

 

Google 资深web开发工程师Steve Souders对CSS选择器的效率从高到低做了一个排序：

 

1.id选择器（#myid）2.类选择器 （.myclassname）3.标签选择器（div,h1,p）4.相邻选择器（h1+p）5.子选择器（ul < li）6.后代选择器（li a）7.通配符选择器（*）8.属性选择器（a[rel="external"]）9.伪类选择器（a:hover,li:nth-child）

 

上面九种选择器中ID选择器的效率是最高，而伪类选择器的效率则是最低、

 

详细的介绍大家还可以点击Writing efficient CSS selectors。

 

posted @ 2015-04-03 20:37  李_鹏  阅读(419)  评论(0)  编辑  收藏  举报