css样式覆盖顺序
2016-02-27 16:55
477 查看
0.样式位置分类
1)使用外部css文件
2)使用head中的style元素
3)使用元素上的style
1.样式覆盖总体原则:
元素上的style > 文件头上的style元素 >外部样式文件
不同级别的样式均对同一元素进行渲染时,对于冲突的样式,会优先采取元素上的style去覆盖文件头上的style元素;对于不冲突的样式,会进行样式叠加。
例如:
对于body元素,元素style与文件头上的style均会命中,此时,backgroud-color样式会进行叠加,color样式出现冲突,会优先选用body元素中的样式。渲染结果为:
2.同级别样式文件下:
1)样式表的元素选择器选择越精确,样式优先级越高:
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
在示例中,css进行渲染时,#mainbody > .main > body
2)对于相同类型选择器制定的样式,在样式表文件中,越靠后的优先级越高:
这里是样式表文件中越靠后的优先级越高,而不是在元素class出现的顺序。
例如,.class2 在样式表中出现在.class1之后,
对于
虽然class1在元素中指定时排在class2的后面,但因为在样式表文件中class1处于class2前面,此时仍然是class2的优先级更高,将采用 color:green
3)如果要让某个样式的优先级变高,可以使用!important
由于head的style中使用了 !important ,渲染时将会采用 color:red
1)使用外部css文件
<link href="/static/css/main.css" rel="stylesheet">
2)使用head中的style元素
<head> <style type="text/css"> .main{color:red;} </style> </head>
3)使用元素上的style
<body style="color:red;"></body>
1.样式覆盖总体原则:
元素上的style > 文件头上的style元素 >外部样式文件
不同级别的样式均对同一元素进行渲染时,对于冲突的样式,会优先采取元素上的style去覆盖文件头上的style元素;对于不冲突的样式,会进行样式叠加。
例如:
<head> <style type="text/css"> .main{color:red;background-color:yellow;} </style> </head> <body id="mainbody" class="main" style="color:green;"></body>
对于body元素,元素style与文件头上的style均会命中,此时,backgroud-color样式会进行叠加,color样式出现冲突,会优先选用body元素中的样式。渲染结果为:
color:green; background-color:yellow;
2.同级别样式文件下:
1)样式表的元素选择器选择越精确,样式优先级越高:
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
在示例中,css进行渲染时,#mainbody > .main > body
2)对于相同类型选择器制定的样式,在样式表文件中,越靠后的优先级越高:
这里是样式表文件中越靠后的优先级越高,而不是在元素class出现的顺序。
例如,.class2 在样式表中出现在.class1之后,
.class1{ color:red; } .class2{ color:green; }
对于
<div class="class2 class1"> <div class="class1 class2">
虽然class1在元素中指定时排在class2的后面,但因为在样式表文件中class1处于class2前面,此时仍然是class2的优先级更高,将采用 color:green
3)如果要让某个样式的优先级变高,可以使用!important
<head> <style type="text/css"> .main{color:red !important; background-color:yellow;} </style> </head> <body id="mainbody" class="main" style="color:green;"></body>
由于head的style中使用了 !important ,渲染时将会采用 color:red
相关文章推荐
- 重新想,重新看——CSS3变形,过渡与动画①
- CSS3实现毛玻璃(图片模糊)效果
- 深入理解CSS网页布局-理论篇
- C 带指针样式的时钟
- css选择器
- NPOI之Excel——合并单元格、设置样式、输入公式
- LESS CSS 框架简介
- css精灵(雪碧图)
- css零碎合集
- CSS实现渐变
- XML使用XSL样式表在浏览器中以XHTML样式展示
- css技巧
- Demo3:基础语法实现论文的样式
- 部分IE8使用的兼容CSS3属性的方法
- 对话框样式的Activity 和 重复点击view
- 针对firefox ie6 ie7 ie8的css样式hack
- 表格标签、标签属性、样式属性总结
- 设置多个模块(div)高度一致
- DIV+CSS 浏览器兼容性小结
- day02—html之CSS基础