码迷,mamicode.com
首页 > Web开发 > 详细

css层叠顺序

时间:2014-11-29 17:13:04      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:style   使用   sp   div   bs   html   as   htm   nbsp   

优先级:

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、浏览器提供的默认规则

 

css层叠顺序

标签:style   使用   sp   div   bs   html   as   htm   nbsp   

原文地址:http://www.cnblogs.com/dalan/p/4131027.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!