CSS 选择器中比较常见的有标签选择器, ID 选择器, 类选择器以及子选择器. 而事实上, CSS 选择器如果细分下来, 竟然多达 40 多种. 那他们的优先级该怎么比较呢, 下面就来看看吧.
● 不同级别
1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式.
2. 作为 style 属性写在元素内的样式
3. id 选择器
4. 类选择器
5. 元素选择器
6. 通配符选择器
7. 浏览器自定义或继承
总结排序:!important> 行内样式> ID 选择器> 类选择器> 元素> 通配符> 继承> 浏览器默认属性
● 同一级别
(1) 同一级别中后写的会覆盖先写的样式
(2) 同一级别 CSS 引入方式不同, 优先级不同
总结排序: 内联 (行内) 样式> 内部样式表> 外部样式表> 导入样式(@import).
对于选择器优先级, 还可以通过计算权重值来比较
总结:
1,!important> id> class> 标签;
2,!important 比 内联优先级高;
3, 当同时使用多个同种类型选择器的时候, 样式以选择器定义的顺序为准, 与在标签内的引用顺序无关;
4, 当一个选择器多次对同一属性赋予不同值的时候, 以最后载入的样式为准.
推荐: CSS 手册 https://www.html.cn/book/css/
来源: http://www.css88.com/qa/css3/14141.html