CSS选择器及其优先级

浏览数：46 / 时间：2015年06月09日

一：一些普通的选择器

<!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的权重

通配选择符的权值 0,0,0,0
标签的权值为 0,0,0,1
类的权值为 0,0,1,0
属性选择的权值为 ~~0,0,1,1~~ 0,0,1,0
伪类选择的权值为 0,0,1,0
伪对象选择的权值为 0,0,0,1
ID的权值为 0,1,0,0
important的权值为最高 1,0,0,0

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

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

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

一篇文章 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的执行效率：

样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。
如果你非常在意页面的性能那千万别使用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。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS选择器及其优先级