<!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>