CSS重要的三大特性：层叠性、继承性与优先级，在学习CSS的过程中，掌握好这三大特性是非常有利于我们的代码编译的效率，我们可以利用这些特性简化代码、优化结构。
1.层叠性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三大特性讲解</title>
<style>
p {
text-decoration: underline;
}
p {
text-decoration: overline;
}
</style>
</head>
<body>
<p>
文字
</p>
</body>
</html>
层叠性的主要内容是：对相同的选择器中冲突的部分取就近原则。
在这段代码中，我们看到style标签内有两个元素选择器都选择了p（段落）这个标签并作出了对其文字的修饰：下划线及上划线；两个元素选择器发生冲突；此时由于CSS的层叠性，段落标签（p）执行的是最后一个选择器中的样式：即上划线，效果如下：
但需要注意的是：CSS中的层叠性只会覆盖冲突（即重复）的部分，对于相同的选择器中的不同样式，CSS不会对其覆盖，如下，我们在第一个p标签中新加了控制缩进的代码，第二个p标签不做更改：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三大特性讲解</title>
<style>
p {
text-decoration: underline;
text-indent: 2em;
}
p {
text-decoration: overline;
}
</style>
</head>
<body>
<p>
文字
</p>
</body>
</html>
如此，即使两个标签相同，但第一个p标签中的text-indent样式并未与第二个p标签冲突（重复），所以在运行结果中，只有（上）划线样式覆盖了第一个p标签，而缩进样式被保留下来：
2.继承性
在html代码编译过程中，会有许多嵌套的标签，我们通常称外层的标签为父标签，内层的为子标签。典型的实例如下：
<ul>
<li>1.</li>
<li>2.</li>
<li>3.</li>
</ul>
继承性，名副其实，就是继承父标签的（部分）样式，在如上给出的例子中，若给ul（无序列表）标签赋予一个（部分）样式，子标签li即使没有给与任何样式，也会携带一些父标签ul的（部分）样式，代码及效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三大特性讲解</title>
<style>
ul {
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li>1.</li>
<li>2.</li>
<li>3.</li>
</ul>
</body>
</html>
继承性并非会继承父标签的所有样式，通常来说，子标签只会继承父标签的一些关于文字属性的样式，例如：text-、font-、line-、color等。
3.优先级
优先级是一个重要的特性：对于CSS的不同选择器都有对应的优先级；我们引入四个数字来分析优先级是如何判断的：
- 0，0，0，0，通配符选择器与继承
- 0，0，0，1，元素选择器（标签选择器）
- 0，0，1，0，（伪）类选择器
- 0，1，0，0，ID选择器
- 1，0，0，0，行内样式style
在这张图表中，有四位数字位数越高代表优先级越高，当出现了不同的选择器对同一标签做出选择时，程序遵循此优先级做出选择，这里我们举一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三大特性讲解</title>
<style>
h1 {
text-decoration: underline;
}
.title {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1 class="title">优先级示例</h1>
</body>
</html>
这段代码中，我们使用了一个元素选择器（标签选择器）和一个类选择器，同时对h1（一级标题）标签进行文字样式的修饰，考虑优先级，回到上表，类选择器的优先级为0，0，1，0，而元素选择器（标签选择器）优先级为0，0，0，1，显然，类选择器的优先级要高于元素选择器，所以在网页中我们看到的文字样式为line-through而非underline：
优先级中更为重要的是优先级的叠加，这种情况出现在复合选择器中；我们需要对复合选择器中的优先级进行权重计算：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三大特性讲解</title>
<style>
ul {
text-decoration: underline;
}
/* 元素选择器的优先级权重为0，0，0，1 */
.list ul {
text-decoration: line-through;
}
/* 此后代选择器中包含一个类选择器和一个元素选择器，其权重计算为：0，0，1，0 + 0，0，0，1 = 0，0，1，1 */
</style>
</head>
<body class="list li">
<ul>
<li>优先级权重计算</li>
<li>优先级权重计算</li>
<li>优先级权重计算</li>
</ul>
<!-- 0，0，1，1权重大于0，0，0，1，故网页样式应为line-through -->
</body>
</html>
下面是网页效果：
还需注意的是：权重的计算不会进位，例如，一个后代选择器中包含了20个元素选择器；那么这个后代选择器的权重为0，0，0，20，它的第三位依旧为0，优先级永远比0，0，1，0的类选择器要低，同理，包含了多个类选择器的后代选择器的优先级也永远比ID选择器的优先级低，以此类推。
最后有一个特殊的语句：!important，若其出现声明中样式的结尾，则此样式的优先级无限大：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三大特性讲解</title>
<style>
ul {
text-decoration: underline !important;
}
/* 声明中出现!important则优先级无限大，在所有相同目标标签的相同样式中优先执行本条*/
.list ul {
text-decoration: line-through;
}
</style>
</head>
<body class="list ul">
<ul>
<li>优先级权重计算</li>
<li>优先级权重计算</li>
<li>优先级权重计算</li>
</ul>
</body>
</html>
根据CSS优先级的特性，我们可以在代码中做出一些优化及改进。
