（注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
参考
CSS默认可继承样式
CSS三大特性之继承性
CSS 继承深度解析
css的三大特性（继承，层叠，优先级）
CSS中可以和不可以继承的属性
网友评论