css样式的优先级总结

蔚落 2024-04-17 16:35 74阅读 0赞

参考资料：  
1、[CSS选择器及优先级 总结][CSS_]  
2、[Web前端面试指导(十三)：css样式的优先级是怎么样的？][Web_css]  
3、[CSS的四种引入方式与特点][CSS]

*  不同级别

1.  在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
2.  作为style属性写在元素内的样式（行内样式）
3.  id选择器
4.  类选择器
5.  元素选择器
6.  通配符选择器
7.  浏览器自定义或继承

总结排序：!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性

*  同一级别

(1) 同一级别中后写的会覆盖先写的样式

(2) 同一级别css引入方式不同，优先级不同   
总结排序：内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)。

对于选择器优先级，还可以通过计算权重值来比较。（请参见：[狠狠戳我][Web_css]）

*  权重规则

(1)一个行内样式记 1000 分；  
(2)一个ID 记 100 分；  
(3)一个类class或伪类（如:link）记 10 分；  
(4)一个标签tag或伪元素（如::first-line) 记 1 分；

/*权重为1*/
    div{
    }
    
    /*权重为10*/
    .class1{
    }
    
    /*权重为100*/
    #id1{
    }
    
    /*权重为100+1=101*/
    #id1 div{
    }
    
    /*权重为10+1=11*/
    .class1 div{
    }
    
    /*权重为10+10+1=21*/
    .class1 .class2 div{
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70][]

注：摘自《CSS实战手册》110页

[CSS_]: https://blog.csdn.net/b954960630/article/details/79560590
[Web_css]: https://blog.csdn.net/lxcao/article/details/52641272
[CSS]: https://blog.csdn.net/a1396531115/article/details/77718956
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/ae2b24e7572c4893aa27cac59323560f.png