css选择器优先级顺序
发布时间:2023-06-01 14:29:00
发布人:zyh
CSS选择器的优先级顺序按照以下规则:
1. !important:最高优先级的标志,添加在声明后面,会覆盖其他所有的样式。
2. 行内样式:包含在HTML元素标签内的样式,会覆盖外部样式表和内部样式表中的样式。
3. ID选择器:通过ID选择器选中的元素,具有比其他选择器更高的优先级。
4. 类选择器、属性选择器和伪类选择器:这些选择器的优先级相同,如果同一元素同时出现这几种选择器,优先级按照后面的选择器计算。
5. 元素选择器、伪元素选择器:这些选择器的优先级最低,只有在其他选择器相同时,才会使用元素选择器和伪元素选择器。
需要注意的是,当选择器的优先级相同时,会选择后面的样式声明。例如:
p {
color: red;
}
.blue {
color: blue;
}
p.blue {
color: green;
}
在这个例子中,p元素和class为.blue的元素会分别有red和blue的颜色,但是拥有p和.blue两个选择器的元素会被赋予绿色。
下一篇css样式优先级