详解CSS三大特性之层叠性继承性和重要性——Web前端系列学习笔记

Posted 2021-10-01 来老铁干了这碗代码

1. CSS层叠性

CSS层叠性就是在html文件中对于同一个标签元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些CSS样式的前后顺序来决定，处于最后面的CSS样式会被应用，示例代码如下：

p{color:red;}
p{color:green;}
</style>
<p >小红是一个胆小如鼠的女孩。</p>

2. CSS继承性

CSS中的某些样式具有继承性，它允许样式不仅应用于某个特定HTML标签，而且应用于其后代。CSS继承性的示例代码如下所示：

<style>
p{color:pink;}
</style>
<p>小红是一个<span>胆小如鼠</span>的女孩。</p>

“小红是一个胆小如鼠的女孩”应显示为粉色，“胆小如鼠”四个字也为粉色的原因是

标签的颜色设置被它的后代标签继承了。

3. CSS重要性

在某个样式设置后添加!important代表该样式具有最高权值， !important要写在分号“;”的前面。
示例代码如下所示：

<style>
p{color:red !important;}
p{color:green;}
</style>
<p >小红是一个胆小如鼠的女孩。</p>

“小红是一个胆小如鼠的女孩”应显示为红色。