css层叠顺序

优先级：

1、添加！important规则的分组享有最高优先级；会将所有不带！important的规则

例如：#id{border：6px solid black!important}高于#id{border：6px solid black;}

2、第二级style属性嵌入的规则 不便于维护 不推荐使用此方法

3、第三级具有一个或者多个ID选择器的规则

例如#id{border:9px solid red}优先级高于.id{border:9px solid red;}

4、第四级优先级分组具有一个或者多个类、属性或伪类选择器的规则

例如.class{border:9px solid red}高于div{border:2px solid black;}

5、第五级一个或者多个元素选择器优先规则

例如：div{border:10px solid red}高于*{border：5px solid black;}

6、第六级指的是那些只包含通配符选择器的规则

例如：*{border：5px solid black;}

备注：如若规则属于同一个选择器分组比如相关两个规则都包含id选择器；那么他们的优先级会根据选择器的类型和数量进行比较；那个具有更多高优先级那么这个选择器的级别就高

（！important >style> ID选择器 > class选择器  > 标签/元素选择器 > 通配符选择器）

；如若出现相同数量和级别的选择器；则会根据位置来进行判断优先级

位置分组优先级：

1、最高优先级html文档头部<style>元素

<style>元素会覆盖<style>元素中@import语句引入的规则

2、<style>元素中的@import导入的样式会覆盖link元素附件的样式

3.link样式会覆盖link元素引入的样式中@import引入的会覆盖最终用户附加样式表的规则

4、link元素引入的样式中@import引入的会覆盖最终用户附加样式表的规则

5、用户附加的样式表（注：用户添加的@important的样式具有最高优先级）

6、浏览器提供的默认规则

 

转载于:https://www.cnblogs.com/dalan/p/4131027.html