HTML&CSS基础-选择器的优先级

　　　　　　　　　　　　　　　　HTML&CSS基础-选择器的优先级

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

 

 

一.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择器的优先级</title>
        
        <style type="text/css">
            /**
             *     选择器的优先级:
             *         当使用不同的选择器，选中同一个元素并且设置相同的样式时，这样样式之间就会产生冲突,最终采取哪个选择器定义的样式，由选择器的优先级(权重)决定，
             *         优先级高的优先显示;
             *         当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后再比较，但是选择器优先级计算不会超过他的最大的数量级,比如10个id选择器优先级权限相加最大不会超过1000，也就是相加后只有900.
             *         如果选择器的优先级一样，则使用靠后的样式;
             *         并集选择器的优先级是单独计算,如"div,p，#web,.hello{}"这是并集选择器，但计算优先级时单独划分计算的，并不会将所有的并集选择器的元素优先级相加。
             *         可以在样式的最后，添加一个"!important",则此时样式将会获得一个最高的优先级，将会优于所有的样式显示，甚至优先级高于内联样式，但是在开发中尽量避免使用"!important",因为整个项目可能时多人协作开发，如果你写死了，有可能会出现别的开发人员怎么调整选择器均无法改变的显现。维护成本不太高；而且我们在开发中一般会使用js去修改html的样式，如果你在css中写死了发现js是改不掉的。
             * 
             *     优先级的规则(数值越大代表优先级越高):
             *         内联样式:
             *             优先级为1000
             *         id选择器:
             *             优先级为100
             *         类和伪类：
             *             优先级为10
             *         元素选择器:
             *             优先级为1
             *         通配优先级(*):
             *             优先级为0
             *         继承的样式:
             *             没有优先级
             * 
             */
    
            p{
                background-color: rosybrown;
            }
            
            #web{
                background-color: royalblue;
            }

            p#web{
                 color: yellowgreen;
             }
            
            *{
                font-size: 50px;
            }
             
             .hello{
                 color:blue ;
                 background-color: deeppink !important;
             }
             
             .world{
                 color:yellow ;
             }
             

        </style>
    </head>
    <body>
        
        <p class="hello world" id="web" style="background-color: yellow;">我是一个p标签
            <span>我是p标签中的span标签</span>
        </p>
    </body>
</html>

 

 

二.浏览器打开以上代码渲染结果

 

 

posted @ 2017-01-12 11:53  尹正杰  阅读(646)  评论(0)  编辑  收藏  举报