<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS的三大特性</title>
<style>
/* 子级继承父级的 继承性*/
body{
font-size: 50px;
color: red;
}
/* 层叠性 */
/* 前面的红色会被后面的蓝色覆盖，但大小和宽度都会生效 */
.box1{
color: red;
font-weight: 800;
}
.box1{
color: blue;
font-size: 80px;
}
</style>
</head>
<body>
<!-- 1.继承性：子级默认继承父级的文字控制属性 -->
<div>div标签</div>
<p>p标签</p>
<span>span标签</span>
<!-- 子级自己有属性就不会继承父级的该属性 -->
<a href="#">a标签</a>
<!-- a标签自己默认是蓝色的，所以不会继承父级body的红色，
但a标签自己没有字体大小，所以会继承父级body的字体大小 -->
<!-- 2.层叠性
相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
不同的属性会叠加：不同的CSS属性都生效
-->
<div class="box1">div1</div>
<div class="box1">div2</div>
<!-- /* 层叠性 */
/* 前面的红色会被后面的蓝色覆盖，但大小和加粗都会生效 */
.box1{
color: red;
font-weight: 800;
}
.box1{
color: blue;
font-size: 80px;
} -->
<!-- 3.选择器的优先级
优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则
规则:选择器优先级高的样式生效
公式：!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
（选中的标签范围越大，优先级越低）
!important：提权功能，提高权重/优先级到最高，慎用
写法：
*{
color：red !important;
}
-->
<!-- 优先级 ------ 权重计算规则
叠加计算：如果是复合选择器，则需要权重叠加计算
公式：每一级之间不存在进位
（行内样式，id选择器个数，类选择器个数，标签选择器个数）
规则：
1.从左到右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
2.!important 权重最高
3.继承 权重最低
-->
<!-- html与css的简便写法：Emmet写法：代码的简写方式，输入缩写VScode会自动生成对应的代码
HTML:
类选择器：标签名.类名：<div class="box"></div>
id选择器：标签名#id名：<div id="box"></div>
同级选择器：div+p：<div></div><p></p>
父子级选择器：div>P：
<div>
<p></p>
</div>
多个相同标签：span*3：<span></span><span></span><span></span>
有内容的标签：div{内容}：<div>text</div> -->
</body>
</html>