CSS的继承、层叠、特殊性和重要性

学习目标

认识 css 的一些特性（继承、层叠、特殊性和重要性）

CSS的继承

继承是一种规则，它允许样式不仅应用于某个特定 html 标签元素，而且应用于某后代。如下所示：

p{color:red;}

<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

上面代码的效果是 p 中的文本与 span 中的文本都设置了红色。但需要注意的是，有些 css 样式不具有继承性的。比如

border

、

solid

。

特殊性

当我们为同一个元素设置不同的 css 样式代码时，浏览器会根据权值来判断使用哪种颜色的 css 样式，权值高的就使用哪种 css 样式。

下面是权值的规则：

标签的权值为 1，类选择器的权值为 10，ID 选择器的权值为 100。如下代码：

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意：继承也有权值但很低，可以理解为权值最低。

层叠

层叠就是在 html 文件中对于同一个元素可以有多个 css 样式存在，当有相同权值的样式存在时，会根据这些 css 样式的前后顺序来决定，处于最后的 css 样式会被应用，可以理解为后面的样式会覆盖前面的样式。如下所示：

p{color:red;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

所以就不难理解前面的 css 样式优先级了：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

重要性

有些特殊的情况我们需要为某些样式设置具有最高权值，这个时候可以使用

important

来解决。如下所示：

p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

重要参考资料

慕课网HTML+CSS基础教程