第四章 - CSS三大特性

这一章节主要描述CSS非常重要的三大特性：层叠性，继承性和优先级。下面对这三个特性分别进行介绍

1. 层叠性

看到这个标题，我们不禁会想，层叠性？？？这个层叠性是会覆盖的意思吗？没错，就是会出现覆盖样式的问题，当我们给相同的选择器设置不同的样式的时候，在相同权重的情况下，后面设置的样式会覆盖掉前面设置的样式，这就实现了CSS的层叠性。

[注]

层叠性原则：

• 样式冲突：遵循的原则是就近原则，那个样式离结构近，就执行哪个样式。
• 样式不冲突：不会层叠

利用下面的示例进行演示：

```CSS
<style>
    div {
       width: 200px;
       height: 200px;
       background-color: pink;
    }
</style>
```
```HTML
<div></div>
```

没有层叠性的时候，显示为下面的样式，因为给div设置的背景颜色为粉色，所以显示的就是粉色。

 当对其再添加样式的时候,后面的样式会覆盖掉前面的样式，这时候div的背景颜色就变为红色。

```CSS
<style>
    div {
       width: 200px;
       height: 200px;
       background-color: pink;
    }
    div {
        background-color: red;
    }
</style>
```
```HTML
<div></div>
```

显示效果如下图所示：

 通过上面一个简单的例子，我们就体会到了层叠性是怎么实现的。

2. 继承性

看到这个特性，我们首先想到的是现实生活中的继承性，比如我们继承了父母的姓，在CSS中的继承性，就是子标签会继承父标签的一些样式，如：文本颜色和字号。

• 子元素可以继承父元素的一些样式(text-,font-,line-这些元素开头的可以继承，以及color属性)
• 行高的继承性(下面代码为示例)

```HTML
body {
    font: 12px/1.5 'Microsoft YaHei';
}
```

• 行高可以跟单位也可以不跟单位
• 如果子元素没有设置行高，则会继承父元素行高的1.5倍
• 此时子元素的行高是：当前子元素的文字大小*1.5
• body行高1.5这样写法最大的于是就是里面子元素可以根据自己文字大小自动调整行高

3. 优先级

当同一个元素指定多个选择器，就会有优先级的产生，谁的优先级高，最终显示的样式就是哪个

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行

选择器权重如下表所示

根据上表，我们可以清楚的知道，选择器的优先级从小到大依次为：

继承/通配符选择器<标签选择器<类选择器/伪类选择器<id选择器<行内样式<!important

[注]

如果多个选择器复合的时候，选择器的权重会叠加。