css层叠样式优先级总结

虽然学前端最刚开始就是html+css，一直因为这些看起来太简单就没有什么总结，不过看似很简单的东西，研究起来也深不可测，问起来js可能回答的头头是道，css这么简单的东西，其中一个优先级的问题就能难道大片人，知道有哪些css选择器，大部分人都能回答出常用常见的几个id选择器，类选择器，标签选择器，伪类选择器等，但应该大部分人都答不全。所以本篇打算总结一下css的选择器和其优先级。

优先级是如何计算的？

1. 优先级就是分配给指定的css声明一个权重。

2. 当优先级相等的时候，最后的那个声明将会被应用到元素上

 

111
 
/* 就像这样，优先级相同，最终显示的颜色是红色，应用到元素上的是最后一个 */
p{color:blue;}
p{color:red;}

 

3. 当同一个元素有多个声明时，优先级才有意义。优先级高的会覆盖优先级低的样式。

css有哪些选择器？

下面优先级依次递减

除此之外，优先级：!important > 内联样式 > 外部样式

通过一个例子感受下，不常用的几个选择符（+、>、~），遵循上面的原则

    
    


    

        
1111
        
1111
        
1111
        
1111
        

            
1111
            
1111
            
1111
            
1111
        
        

            
1111
            
1111
            
1111
            
1111
        
    

 参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

转载于:https://www.cnblogs.com/leiting/p/10436477.html