1. 层叠性
概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆
盖）。
什么是样式冲突？ ——— 元素的同一个样式名，被设置了不同的值，这就是冲突。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS_三大特性-层叠</title>
<style>
/* 概念：如果发生了样式冲突，那就会根据一定的规则
（选择器优先级），进行样式的层叠（覆盖）。 */
#id {
color: aqua;
font: bold italic 20px "隶书"
}
p{
color: red;
}
</style>
</head>
<body>
<div>
<p id="id">哈哈</p>
</div>
</body>
</html> 
2.继承性
概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。规则：优先继承离得近的。常见的可继承属性：text-?? ， font-?? ， line-?? 、 color ......
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS_三大特性-继承</title>
<style>
/* 体现了继承性 设置父代属性，其后代元素也会拥有
概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
规则：优先继承离得近的。
*/
div {
color: brown;
}
p{
color: aqua;
}
</style>
</head>
<body>
<div>
<span>
我是span里的
<p>
我是p里的
<p>
<span>我是span里的</span>
</p>
</p>
</span>
</div>
</body>
</html>
3.优先级
简单聊：
!important >
行内样式
>
ID
选择器
>
类选择器
>
元素选择器
>
*
>
继承的样
式。
1.简单聊
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器优先级_简单聊</title>
</head>
<style>
/* 行内 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 */
*{
color: red;
}
h2{
color: blue;
}
.slogan{
color: green;
}
#atguigu{
color: aqua;
}
</style>
<body>
<h2 style="color: black;" class="slogan" id="atguigu" >尚硅谷，让天下没有难学的技术</h2>
</body>
</html>
2.详细聊
需要计算权重。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器优先级_详细聊 </title>
</head>
<style>
/* 二个类选择器一个元素选择器 */
.container span.slogan{
font:bold italic 30px "华文琥珀";
color: blue;
}
div>p>span:nth-child(1){
color: red;
}
</style>
<body>
<div class="container">
<p>
<span class="slogan" id="atguigu" >尚硅谷，让天下没有难学的技术！</span>
<hr>
<span>欢迎同学们来学习！</span>
</p>
</div>
</body>
</html>
特殊规则：1. 行内样式权重大于所有选择器。2. !important 的权重，大于行内样式，大于所有选择器，权重最高！
