CSS优先级顺序
下列是一份优先级逐级增加的选择器列表：
-
通用选择器
-
元素（类型）选择器
-
类选择器
-
属性选择器
-
伪类
-
ID 选择器
-
内联样式
- !important声明的样式
当CSS选择器权重相同，则最后的声明的CSS选择器覆盖靠前的 CSS
多重样式（Multiple Styles）
如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。
一般情况下，优先级为：(（外部样式）External style sheet /（内部样式）Internal style sheet 按声明先后) <（内联样式）Inline style
示例如下：
| <head> |
| <style type="text/css"> |
| h3{color:green;} |
| </style> |
| <!-- 外部样式 style.css --> |
| <linkrel="stylesheet"type="text/css"href="style.css"/> |
| <!-- 设置：h3{color:blue} --> |
| </head> |
| <body> |
| <h3>welcome sojson.com</h3> |
| </body> |
选择器的优先权
选择器的优先权解释说明
-
内联样式表的权值最高 1000。
-
ID选择器的权值为 100。 -
Class类选择器的权值为 10。 -
HTML标签（类型）选择器的权值为 1。
选择器的权值进行计算比较，结果如下：
| <html> |
| <head> |
| <style type="text/css"> |
| #redP p { |
| color:#F00; |
| } |
| #redP .red em { |
| color:#00F; |
| } |
| #redP p span em { |
| color:#FF0; |
| } |
| </style> |
| </head> |
| <body> |
| <divid="redP"> |
| <pclass="red">red |
| <span><em>em red</em></span> |
| </p> |
| <p>red</p> |
| </div> |
| </body> |
| </html> |
结果：<em> 标签内的数据显示为蓝色
改为：
<style type="text/css">
#redP p {
color:#F00;
}
#redP .red em {
color:#00F;
}
#redP p span em {
color:#FF0 !important;
}
</style>
将显示为黄色