CSS选择器及其优先级

时间：2024-03-27 23:03:56

一：一些普通的选择器

<!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选择器的优先级比类型选择器优先级高*/

效果截图：

aaarticlea/png;base64,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" alt="" />

二：优先级实例

<!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>

 效果图：

aaarticlea/png;base64,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" alt="" />

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

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

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

  2. 标签的权值为 0,0,0,1
  3. 类的权值为 0,0,1,0
  4. 属性选择的权值为 0,0,1,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。

相关文章