css在书写的过程中难免的会出现对同一个元素的属性层叠,所以css也叫层叠样式表,由此带来的优先级问题值得我们了解。
接下来看一段代码,里面主要包含了类选择器,通配选择器,id选择器,标签选择器以及行内样式,我用它们分别设置了p标签字体的颜色,接下来通过删除来观察它们的优先级
行内样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#p2{
color: green;
}
*{
color: blue;
}
.p1{
color: yellow;
}
p{
color: black;
}
</style>
</head>
<body>
<p class="p1" id="p2" style="color: red;">css选择器优先级</p>
</body>
</html>
现在字体颜色为红色,如下图。看来行内样式是其中的最高优先级。
id选择器
现在我们把行内样式删除,现在颜色变成了绿色,id选择器起作用了,现在是:行内样式>id选择器
类选择器
现在删除id选择器,我们的类选择器生效了,字体变成了黄色,现在是:行内样式>id选择器>类选择器
标签选择器
删除了类选择器,我们的标签选择器生效,字体为黑,行内样式>id选择器>类选择器>标签选择器
通配选择器
最后只剩下了通配选择器,字体为蓝色
得出结论:行内样式>id选择器>类选择器>标签选择器>通配选择器
但是呢仅仅掌握这些还不够,现实中往往有更复杂的情况。
复杂情况–权重值
选择器 | 权重值 |
---|---|
通用选择器 | 0 |
标签选择器 | 1 |
类选择器 | 10 |
id选择器 | 100 |
行内样式 | 1000 |
当我们遇见了一个复合的选择器,例如 #p .a1 ul,它由类选择器,id选择器和标签选择器构成,它的权重就是三者权重之和,100+10+1=111
对于初学者计算这些权重可能比较麻烦,只要记住,选择范围越小越精确的复合选择器,他的优先级通常越高。