您的位置：首页 > Web前端 > CSS

写给初学者css优先级问题

2015-11-09 00:12 549 查看 
首先需要搞清楚几个基本概念
　　1.内嵌样式：
　　　　写在元素标签内的例如：<div style="background-color:red">   </div>
　　2.内联样式：
　　　　写在head的style例如：<head>
　　　　　　　　　　　　　　　　　　<style>
　　　　　　　　　　　　　　　　　　　　　　div{
　　　　　　　　　　　　　　　　　　　　　　　　　　background-color:red;
　　　　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　</style>
　　　　　　　　　　　　　　　</head>
　　3.外部样式：
　　　　link标签引入进来的例如：<link rel="stylesheet" href="1.css"/>
4.important:只要设置了important的优先级永远最高。例如：border:1px solid red !important;　　
　　优先级：！important > 内嵌（标签内）> 内联（style）=外部;
说明：这里很多初学者都会误会内联优先级要高与外部，实际上是相等的。例如：
　　　　<head>
　　　　　　　　<link rel="stylesheet" href="1.css"/>//名为1的css文件中有div{background:blue;}
　　　　　　　　<style>
　　　　　　　　　　div{

　　　　　　　　　　　　　　background-color；red;
　　　　　　　　　}
　　　　　　　</style>
　　　　</head>
　　　　此时div的背景色为red;

　　　　<head>
　　　　　　　　<style>
　　　　　　　　　　div{


　　　　　　　　　　　　　　background-color；red;
　　　　　　　　　}
　　　　　　　</style>
　　　　　　　<link rel="stylesheet" href="1.css"/>//名为1的css文件中有div{background:blue;}
　　　 </head>

　　　　此时div的背景色为blue；

选择器权重值：内嵌：1000；
　　　　id:0100;
　　　　class或伪类：0010；
　　　　元素或伪元素：0001；
　　　　*：0000；
说明：权重值越大优先级越高；权重值可以累加，但是不会越位，例如：
　　　　嵌套十层div，然后有一个div元素选择器，该选择的权重值为000 10，而不是0010，仍旧比class或伪类选择器的权重值小。

权重值：内嵌（1000）>id（0100）>class/伪类（0010）>元素/伪元素（0001）> * 权重值越高优先级越高。 important永远最高。

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航