CSS选择器优先级
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>
将显示为黄色