优先级

一.属性与通配符对比：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin:0px;padding:0px;500px;height:200px;}
            .wrap{500px;height:500px;margin:200px auto;}
        </style>
    </head>
    <body>
        <div class="wrap">
           <canvas width="300" height="50"></canvas>
        </div>
    </body>
</html>

总结：通配符的优先级大于属性优先级

二。通配符与tag：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin:0px;padding:0px;}
            .wrap{width:500px;height:500px;margin:100px auto;}
            p{width:500px;height:200px;background: red;margin-left:200px;}
        </style>
    </head>
    <body>
           <div class="wrap">
                   <p></p>
           </div>
    </body>
</html>

总结：tag优先级大于通配符的优先级

三.class与tag

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin:0px;padding:0px;}
            .wrap{width:500px;height:500px;margin:100px auto;}
            p{width:500px;height:200px;background: red;}
            .para{background: green;}
        </style>
    </head>
    <body>
           <div class="wrap">
                   <p class="para"></p>
           </div>
    </body>
</html>

总结：class优先级大于tag的优先级

四.id与class

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin:0px;padding:0px;}
            .wrap{width:500px;height:500px;margin:100px auto;}
            p{width:500px;height:200px;background: red;}
            .para{background: green;}
            #para{background: yellow;}
        </style>
    </head>
    <body>
           <div class="wrap">
                   <p class="para" id="para"></p>
           </div>
    </body>
</html>

总结：id优先级大于class的优先级

五.id与行内样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin:0px;padding:0px;}
            .wrap{width:500px;height:500px;margin:100px auto;}
            p{width:500px;height:200px;}
            #para{background: yellow;}
        </style>
    </head>
    <body>
           <div class="wrap">
                   <p class="para" id="para" style="background: orange;"></p>
           </div>
    </body>
</html>

总结：行内样式优先级大于id的优先级

六.行内样式与js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin:0px;padding:0px;}
            .wrap{width:500px;height:500px;margin:100px auto;}
            p{width:500px;height:200px;}
        </style>
        <script src="jquery-1.7.2.js"></script>
        <script>
            $(function(){
                $('.para').css({
                    background:'red'
                })
            })
        </script>
    </head>
    <body>
           <div class="wrap">
                   <p class="para" id="para" style="background: orange;"></p>
           </div>
    </body>
</html>

总结：js优先级大于行内样式的优先级

七：js与！important

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin:0px;padding:0px;}
            .wrap{width:500px;height:500px;margin:100px auto;}
            p{width:500px;height:200px;}
            .para{background: purple !important;}
        </style>
        <script src="jquery-1.7.2.js"></script>
        <script>
            $(function(){
                $('.para').css({
                    background:'red'
                })
            })
        </script>
    </head>
    <body>
           <div class="wrap">
                   <p class="para"></p>
           </div>
    </body>
</html>

总结：!important优先级大于js优先级

css优先级权重：

　　属性选择器权值为 0.01

　　　　通配符选择器的权值为 0.1

　　　　标签选择器的权值为 1

　　　　Class 类选择器的权值为 10

　　　　ID 选择器的权值为 100

　　　　内联样式表的权值 1000；

　　　　js权值大于1000；

　　　！important无限大；

CSS 优先级法则：

　　　　A 选择器都有一个权值，权值越大越优先；

　　　　B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

　　　　C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；

　　　　D 继承的CSS 样式不如后来指定的CSS 样式；

　　　　E 在同一组属性设置中标有“!important”规则的优先级最大；