css优先级计算规则——权重

一、css的优先级

　　当对同一个元素设置相同的多个声明时，会按照优先级的高低选择应用哪种声明。

        <style>
            #id{
                color:red;
            }
            p{
                color:blue;
            }
        </style>

        <div id="te">
　　　　　　　<!-- p元素内的颜色设置为black，因为对p元素的设置，该段代码中行内样式的优先级最高 --!>
            <p id="id" style="color:black;"></p>
        </div>

二、优先级的计算方式——权重

　　1、权重计算的基础

　　　　内联样式：1000

　　　　id选择器：0100

　　　　类、伪类、属性选择器：0010

　　　　元素、伪元素选择器：0001

　　　　通配符:0000

　　2、比较规则

　　　　a、1,0,0,0 > 0,99,99,99

　　　　b、内部样式和外部样式优先级相同

　　　　c、权重相同的情况下，后写的会覆盖先写的样式

　　　　d、使用后代选择器和子类选择器，则需要把某个元素所有的修饰权值相加，即修饰的越精确，权值越高，如：

　　　　　　　　　.class p[type="text"]{color:#000;}/*权值：0021*/，

　　　　　　　　　该样式中，关于p元素的权值为，一个类选择器0010，一个元素选择器0001，一个属性选择器0010，最终结果0021。

　

<div id="te" class="cte">
    <div>div</div>
    <p type="text">345</p>
    <p id="id">123</p>
    <p class="class">666</p>
    <p text="text">777</p>
    <p style="color=red;"></p><!-- 权值：1000 --!>
</div>

*{color:green;}/*权值：0000*/
p{color:#00f;}/*权值：0001*/
div p{color:orange;}/*权值：0002*/
.class{color:gray;}/*权值：0010*/
.class p[type="text"]{color:#000;}/*权值：0021*/
#id{color:red;}/*权值：0100*/
div #id{color:red;}/*权值：0101*/

三、特殊的优先级

　　!important，它没有权重，但是加上这个标签后，该声明就是最高优先级，大于内联样式。

　　如果在某个声明中加了!important，则该页面中无论后面加了其他什么样的样式，生效的只有这个。

        <style>
            *{
                color:green!important;
            }
        </style>