版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/github_27546161/article/details/74231584
对于初学者来说,稍复杂点的CSS样式就很容易把人搞得一脸懵逼。比如莫名得到了一个没有去特意设置的字体颜色,又或者费了老半天劲却得不到想要的背景样式。
这篇文章就来彻底撕掉CSS神秘的外衣,看看到底样式的优先级是怎么定的。
啥都不管,先上个栗子:
html:
<p>
<span>我到底该是什么颜色</span>
<p>
css:
p>span{
color:blue;
}
span{
color:green;
}
请各位看官猜猜看目标文本最终是蓝色还是绿色呢?
绿色在后所以会覆盖蓝色?
当然不是。
这里就是权值这个东西在起作用:
标签选择器:权值=1;
类选择器:权值=10;
ID选择器:权值=100;
于是我们可以得到:
p>span的权值 = p标签的权值1 + span标签的权值1 = 2
span的权值 = 1
自然2>1,于是最终p>span占了上风,文本颜色最终为蓝色。
再来几个小栗子:
form#gender的权值 = 1+100 = 101;
.bigsize span#city的权值 = 10+1+100 = 111;
当然,在权重相同的情况下,处于最后的CSS样式会被呈现,可以理解为它覆盖了前面的样式。
这样CSS样式优先级也就好理解了:内联样式表(标签内)>嵌入样式表(当前文件中)>外部样式表(外部文件中)。
以上就是CSS样式优先级的原理。