Css的优先级机制
样式的优先级
多重样式(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> |
