这里写目录标题
一级目录
二级目录
三级目录
继承性
CSS的继承性是指子元素继承了父元素的某些样式属性。但并不是所有的属性都能继承。
不能继承的属性：border，padding，margin
能继承的属性可以分为三类：
1 文本相关属性：font-family(字体），font-size(字体大小）,font-style（字体风格）,font-weight（字体粗细）,font（字体的复合属性）,line-height（行高）,text-align（对齐方式）,text-indent（首行缩进）,word-spacing（间距）。
2 列表相关属性：list-style（列表的复合属性），list-style-image（自定义列表项符号），list-style-position（符号的位置和对齐方式），list-style-type（列表项符号的类型）。
3 颜色的相关属性：color
超链接的特殊性
看以下例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a标签的特性</title>
<style type="text/css">
div{
color:red;
}
</style>
</head>
<body>
<div>
<p>点击下方文字</p>
<a href="https://cn.bing.com">此处是一个超链接</a>
</body>
</html>
根据程序运行的结果显示超链接字体并没有继承父元素，呈现红色。打开开发者工具，发现原本的红色被划掉了，这是因为a元素本身有默认的样式，优先级高于继承的颜色。
解决办法
在a元素中使用color：inherit即可。
<a style="color:inherit" href="https://cn.bing.com">此处是一个超链接</a>
层叠性
CSS全称是Cascrading Style Sheet（层叠样式表），层叠就是样式的覆盖。对于同一个元素来说，如果我们重复定义多个相同的属性，且权重相同时，遵循后来居上的原则。当权重不同时，值高者优先。这个就要提到CSS的优先级了。
优先级
当样式发生冲突时，以优先级高的为准，以下介绍四种常见的冲突。
引用方式冲突
行内样式>(内部样式=外部样式）
当某一元素的相同属性既有内部样式也有外部样式时，遵循后来者居上的原则。
继承方式冲突
最近的祖先元素为先。
指定样式冲突
指定样式指的是当前元素的样式，发生冲突时权重高者获胜。CSS各种选择器的权重如下表：
| 选择器 | 权重 |
|---|---|
| 通配符 | 0 |
| 伪元素 | 1 |
| 元素选择器 | 1 |
| class选择器 | 10 |
| 伪类 | 10 |
| 属性选择器 | 10 |
| id选择器 | 100 |
| 行内样式 | 1000 |
在实际的应用中，可能会因为没有真正理解当前元素的含义而弄错真正的样式，例如以下例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>权重</title>
<style type="text/css">
#fontcolor{
/* 权重为100 */
color:red;
}
#fontcolor .inner{
/* 权重为100+10=110； */
color:blue;
}
#fontcolor p span{
/* 权重为100+1+1=102 */
color:black;
}
#fontcolor p span strong {
/* 权重为100+1+1+1=103; */
color:green;
}
</style>
</head>
<body>
<div id="fontcolor">
<p class="inner">
<span><strong>到底是什么颜色呢</strong></span>
</p>
</div>
</body>
</html>
可能会有人觉得字体为蓝色，因为计算出来的权重最高。
但我们需要注意的是，这是针对strong元素来说的，权重最高的是绿色，所以字体应该是绿色。#fontcolor .inner{}针对的是p元素，属于继承样式。在CSS中，选择器权重的计算只针对指定样式即当前元素，并不能用于继承。
当我们删掉上例中的#fontcolor p span strong{}，字体显示为黑色，原因是继承了span元素的颜色。
！important
如果一定要使用某种样式，可以使用！important来覆盖所有其他的样式。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>权重</title>
<style type="text/css">
strong{
color:red !important;
}
#fontcolor p strong{
/* 权重为100+1+1=102 */
color:black;
}
#fontcolor p span strong {
/* 权重为100+1+1+1=103; */
color:green;
}
</style>
</head>
<body>
<div id="fontcolor">
<p class="inner">
<span><strong>到底是什么颜色呢</strong></span>
</p>
</div>
</body>
</html>