CSS的继承、特殊性和层叠

继承

CSS的某些样式是具有继承性的，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。

p{
    color:red;
}
<p>三年级时，我还是一个<span>稚嫩的</span>小鲜肉。</p>

但注意，有一些css样式是不具有继承性的。如border:1px solid red;

p{
    border:1px solid red;
}
<p>三年级时，我还是一个<span>稚嫩的</span>小鲜肉。</p>

在上面例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没用起到作用的。

---

特殊性

有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码：

p{
color:red;
}
.first{
color:green
;}
<p class="first">三年级时，我还是一个<span>稚嫩的</span>小鲜肉。</p>

p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种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*/
 } 

---

层叠

如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？遇到这类问题，我们可以采用层叠的思想去解决它。
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
如下面代码:

p{
    color:red;
}
p{
    color:green;
}
<p class="first">三年级时，我还是一个<span>稚嫩的</span>小鲜肉。</p>

最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。
所以css样式中的优先级就不难理解了：
即： 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。