CSS入门7-三大特性之继承特性

love丁酥酥·web前端工程师

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）

（注2：更多内容请查看我的目录。）

1. CSS三大特性简介

我们来看运动会开幕式的例子。仪仗队需要穿仪仗队服，你只需要指定仪仗队需要穿红色的队服即可，只要该同学是仪仗队员，他自然会穿上红色的队服。不需要一个个找到仪仗队员，告诉他们该穿怎样的衣服。这叫继承性。假如你还要求所有男生都必须是短发，你对所有男生和仪仗队员的要求将会层叠，仪仗队员里的男生就会是穿着红色队伍，理短发，这就是层叠性。这个时候你还有要求了，所有男生穿蓝色运动裤，仪仗队要求仪仗队队员穿白色裤子。那作为仪仗队的男队员，你到底该穿什么颜色的裤子呢？这里当层叠性涉及到冲突的时候，就需要考虑优先级。（其实，我看到更多的解释是说优先级是针对具体的样式，而不是选择器的，也就是说对同一个属性定义不同的值才是层叠性，但是我觉得自己的解释更容易让人理解，层层递进。其实，大家不用去扣字眼，有些定义是帮助我们去理解事物本身的，理解本质才是我们的目的，照本宣科是很难进步的，知识要成为自己的知识，用自己的理解说出来）。

2.继承性

继续看第1节的例子。我们制定仪仗队整体的着装，仪仗队员都会默认遵守该着装要求。可是如果我们队队伍的长宽和形状做出要求，队员却不能继承，比如要求阵型呈圆形，我们是对整体的特有属性在做要求，而不是要求每个人都是圆形。我们的css继承也一样，并不是所有的样式都是可以继承的，那么哪些样式是可以继承的呢？

3.可继承样式

哪些样式是可以继承的呢？其实在这里我不建议去强记，我们要理解，继承是为了减少我们的工作量，不需要重复地去指定一些属性。判别一个样式属性是否能继承，我们将其翻译为，所有后代属性XXX都是XXX，看一下是否通用可行。比如：

div {
  color: red
}

div的所有后代字体颜色都是红色，这句话明显帮我们简化了大量的工作，不必要再为div的每一个后代去指明颜色，只要不是特例，它都行之有效。可以看下面例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test01</title>
    <style>
        div {
            color: red;
        }
    </style>
</head>
<body>
<div>
    <p>aaa</p>
    <div>bbb</div>
    <div>
        <p>ccc<span>ddd</span></p>
    </div>
</div>
</body>
</html>

该页面效果如下图：

test01

虽然我们没有给div的后代元素指定颜色，但是它的后代默认都展示红色。

那么哪些属性不能继承呢，是那些涉及元素整体表现的，比如display，border等。大家可以看下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test02</title>
    <style>
        .square {
            width: 100px;
            height: 100px;
            border: 5px solid blue;
            color: red;
        }
    </style>
</head>
<body>
<div class="square">
    <div>
        123
    </div>
</div>
</body>
</html>

这段代码运行后效果如下图所示：

test02

明显里面的无class的div没有继承外层的square的border属性，如果继承应该是如下代码所展示的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test03</title>
    <style>
        .square {
            width: 100px;
            height: 100px;
            border: 5px solid blue;
            color: red;
        }
    </style>
</head>
<body>
<div class="square">
    <div class="square">
        123
    </div>
</div>
</body>
</html>

test03

这里其实我们还看不出宽高是否有被继承，这个稍后我们再说。

说到这里，其实大家能有个大概的认知了。就是作用于元素整体对外表现的属性是不可以被继承的，作用于元素后代每个个体的属性是可以被继承的。我们举一个这样的例子，仪仗队穿蓝色衣服，仪仗队站在红色的背景墙前，这两句话，我们可以理解为，仪仗队全体队员穿蓝色衣服，集体站在红色背景墙前。蓝色衣服可以被继承，红色背景墙不可被继承。因为蓝色衣服针对的是每个队员，而背景墙是整体，总不能每个队员背后都放一块墙吧，如果这样，这给我们的工作并没有带来简化，反而更加复杂。

4. 可继承属性列举

说了这么多，还是看一下实际可继承的属性有哪些。我这里不会一一列举，有兴趣的同学可以看CSS中可以和不可以继承的属性，并在实际操作中去验证。

可继承的属性：

font系列属性 font：组合字体 font-family：规定元素的字体系列 font-weight：设置字体的粗细 font-size：设置字体的尺寸 font-style：定义字体的风格 ...
文本系列属性 text-indent：文本缩进 text-align：文本水平对齐 line-height：行高 word-spacing：增加或减少单词间的空白（即字间隔） color：文本颜色 ...
列表布局属性 list-style-type、list-style-image、list-style-position、list-style ...
...

5. 特殊规则

当然，继承并不总是那么可靠。比如你希望整个仪仗队都穿红色的衣服，但其实一直以来队长都有专门的队长服，旗手也有专门的旗手服，虽然你没有为他们指定，但是却有默认的规定，这些默认的样式是优于继承样式的（这里提前涉及了一点优先级的知识）。

5.1 a标签的字体颜色

a标签的字体颜色不继承自其父元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test04</title>
    <style>
        .red {
            color: red;
        }
    </style>
</head>
<body>
<div class="red">
    <div>
        <p>123</p>
        <a href="#">456</a>
    </div>
</div>
</body>
</html>

test04

我们可以看到，虽然它继承了颜色属性，但是被默认生成的样式给覆盖了。

5.2 h标签字体的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test05</title>
    <style>
        .big {
            font-size: 20px;
        }
    </style>
</head>
<body>
<div class="big">
    <div>
        <h1>h1</h1>
        <h2>h2</h2>
        <p>123456</p>
    </div>
</div>
</body>
</html>

test05

5.3 div的高度

继续我们鞋盒的例子，我们有一个箱子来放鞋盒，不特殊处理的情况下，鞋盒是一层层摞起来的。那么如果不指定鞋盒的宽度，她自动就占据了这一层，和先换个字宽度一样。但是高度呢？如果不特殊指定，上一层鞋盒就直接摞在本层之上，鞋盒的高度在不指定的情况下就由其内容决定。div就是这样的鞋盒，宽度默认继承父元素，高度默认由内容撑开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test06</title>
    <style>
       .test {
           width: 100px;
           height: 100px;
       }
    </style>
</head>
<body>
<div>
    <div>宽度默认和父元素一样，高度是自己定的</div>
    <div>宽度默认和父元素一样，高度是自己定的 <br/><br/></div>
    <div class="test">自己定宽高</div>
</div>
</body>
</html>

test06.1.png

test06.2

test06.3