CSS三大特性之优先级

来源：互联网发布：网络经济时代的利与弊编辑：程序博客网时间：2024/05/29 13:50

优先级的顺序：行内样式>id选择器>类选择器>标签选择器>*通配符选择器>继承

有点晕，先看代码，例如有如下代码，运行后的字体颜色为红色，可以从行内样式依次进行屏蔽，就可以发现样式的优先级如上所述

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        * { /*通配符选择器*/            color: pink;        }        body {  /*继承*/            color: green;        }        div {   /*标签选择器*/            color: blue;        }        .d1 {   /*类选择器*/            color: yellow;        }        #d2 {   /*id选择器*/            color: purple;        }    </style></head><body>    <!--行类样式-->   <div style="color: red " class="d1" id="d2">优先级</div></body></html>

但是优先级有个变数就是important,它可以改变选择器的优先级，如果在某个样式后面添加了important后，该选择器的优先级就会最高，例如：还是如上代码，给类选择器添加important后，字体颜色就会变成黄色。</span>

.d1 {   /*类选择器*/    color: yellow !important;}

但是important有一个特殊性，它用在继承上不起作用，因为属性无法继承。例如给body添加important，其它选择器不添加，最后字体的颜色还是红色。

body { /*继承选择器*/      color: green !important;}

接下来讲优先级的权重，

权重算法：（0， 0， 0， 0）

第一个0对应着important的个数，

第二个0对应着id选择器的个数

第三个0对应着类选择器的个数

第四个0对应着标签选择器的个数

比较方法：先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，则比较第二个，依此类推。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        div div { /*(0, 0, 0, 2)*/            color: red;        }        div .son { /*(0, 0, 1, 1)*/            color: blue;        }        div #son {/*(0, 1, 0, 1)*/            color: pink;        }        .father div {/*(0, 0, 1, 1)*/            color: yellow;        }        .father .son {/*(0, 0, 2, 0)*/            color: green;        }        .father #son {/*(0, 1, 1, 0)*/            color: purple;        }        #father div {/*(0, 1, 0, 1)*/            color: gray;        }    </style></head><body><div class="father" id="father">    <div class="son" id="son">权重</div></div></body></html>

通过权重的算法我们可以很快的得知最后字体的颜色为紫色

如果给下面的样式添加了!important，则权重变成最高，字体颜色将为绿色

.father .son {/*(1, 0, 2, 0)*/    color: green !important;}

最后说一下选择器的工作原理

选择器在查找元素的时候不是从左往右找，而是从右往左找

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        /*从左往右找*/        div div { /*先找到一个子元素标签为div,然后再找这个元素是否有一个父元素标签也为div*/            color: red;        }        div {            color: blue;        }    </style></head><body><div>    文字    <div>        文字        <div>文字</div>    </div></div></body></html>

结果显而易见是：蓝，红，红

1 0