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

css通过特殊性解决样式冲突

2015-07-22 14:09 591 查看
刚学习css层叠样式表的时候，对这种情况下元素的最终样式比较困惑。比如下面这段代码：

h1{ color: red;  }
body h1{color:green;}<pre name="code" class="css"><body>
<h1>我该显示哪个颜色？</h1>
</body>
（其他部分代码省略）

对同一个元素设置样式，这个看似是冲突的，最终这个<h1>会使用哪个样式，红色还是绿色？

答案就在于选择器的特殊性。拥有最高特殊性的属性申明就使得<h1>元素显示申明对应的颜色。这个例子中，前者申明的特殊性为0,0,0,1，而后者的特殊性为0,0,0,2 。所以后者的特殊性高，最终<h1>现实的颜色就green。

脑补一下：选择器的特殊性有选择器组件确定的。特殊性表述为4部分，如：0,0,0,0。一个选择器的具体的特殊性怎么确定，有下面这几种规则：

1、对于选择器中的各个ID属性值（元素的id=“xxx”），特殊性就就加  0,1,0,0。

2、对于选择器中的各个类属性值（元素的class=“xxx”）、属性选择(如：p[href]  )和伪类（如： :lang(),  :first-child(),   :focus()   :link()   :visited()   :hover()   :active()）特殊性就加0,0,1,0。

3、对于选择其中给定的各个具体的元素（如 ：p ，span， h1~h6，body，section ，video，article ）和伪元素（如： :first-letter   :first-line   :before   :after）特殊性就加0,0,0,1

4、内联声明的特殊性最高（如： <h1 style="color:green;">这是大标题</h1>）,特殊性为1,0,0,0。【在css2.0中它的特殊性为0,1,0,0  ，在css2.1中为1,0,0,0】

5、（特殊的地方）结合符合通配选择器（*）对特殊性没有贡献。

举几个栗子：

h1{color:maroon;}     /*特殊性为 = 0,0,0,1*/

#test{background:#747474;}     /*特殊性为 =0,1,0,0 */

#test  .content{font-size:16px;}     /*特殊性为 = 0,1,1,0*/

div #sidebar *[src]{color:#fff;}    /*特殊性为 = 0,1,1,1*/

对于引用第三方库，想修改中间的某些样式，直接复制选择器，在自己的css文件中重写样式，后面写的就会覆盖库中的样式。
                                            

                                        

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

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航