CSS样式的权值——确定最终起作用的CSS样式

版权声明：本文为博主原创文章，未经博主允许不得转载。 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样式优先级的原理。