样式的优先级
多重样式(Multiple Style):如果外部样式、内部样式、内联样式同时应用于同一个元素,就是使用多重样式的情况。
一般情况优先级如下:
(外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style
有一个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。
示例如下:
<head> |
<style type="text/css"> |
/* 内部样式 */ |
h3{color:green;} |
</style> |
<!-- 外部样式 style.css --> |
<link rel="stylesheet" type="text/css" href="style.css"/> |
<!-- 设置:h3{color:blue;} --> |
</head> |
<body> |
<h3>测试!</h3> |
</body> |
选择器的优先级:
内联样式表的权值最高1000,
ID选择器的权值为100,
class类选择器的权值为10,
html标签选择器的权值为1
CSS优先级法则:
A选择器都有一个权值:权值越大越优先。
B当权值相等时,后出现的样式表设置要优先于先出现的样式表设置。
C网页编写者设置的css样式的优先权高于浏览器设置的样式
D继承的CSS样式不如后来指定的CSS样式
E在同一组属性设置中标有"!important"规则的优先级最大;
<html> |
<head> |
<style type="text/css"> |
#redP p{ |
/*两个color属性在同一组*/ |
color:#00f !important; /* 优先级最大 */ |
color:#f00; |
} |
</style> |
</head> |
<body> |
<div id="redP"> |
<p>color</p> |
<p>color</p> |
</div> |
</body> </html> |