结构伪类选择器

目标：能够使用 结构为类选择器 在HTML中定位元素

• 作用与优势：
• • 作用：根据元素在HTML中的结构关系查找元素
• • 优势：减少对于HTML中类的依赖，有利于保持代码整洁
• • 场景：常用于查找某父级选择器中的子元素

---

选择器

• 选择器：
• • E：first-child{} ，说明：匹配父元素中第一个子元素，并且是E元素
• • E：last-child{} ，说明：匹配父元素中最后一个子元素，并且是E元素
• • E：nth-child（n）{}，说明：匹配父元素中第n个子元素，并且是E元素
• • E：nth-last-child(n){}，说明：匹配父元素中倒数第n个子元素，并且是E元素

---

n的注意点：

• n为：0，1，2，3，4，5，6，......
• 通过n可以组成常见公式
• 公式：
• • 偶数：2n，even，
• • 奇数：2n+1，2n-1，odd
• • 找到前五个：-n+5
• • 找到从第五个往后：n+5

---

伪元素

目标：能够使用伪元素在网页中创建内容

• 为元素：一般页面中的非主体内容可以使用伪元素
• 区别：
• • 元素：html设置的标签
• • 伪元素：由css模拟出的标签效果
• 种类：
• • 伪元素 ::before ，在父元素内容的最前添加一个伪元素
• • 伪元素 ::after ，在父元素内容的最后添加一个伪元素
• 注意点
• • 必须设置content属性才能生效
• • 伪元素默认是行内元素

清除浮动

• 清除浮动的方法-2额外标签法

• 操作：
• • 在父元素内容的最后添加一个块级元素
• • 给添加的块级元素蛇者clear：both
• 特点：
• • 缺点：会在页面中添加额外的标签，会让页面的html结构变得复杂

清除浮动的方法-3单伪元素清除法

操作：用伪元素代替了额外标签

• 1. 基本写法

.clearfix::after {
    content: ''；
    display: block;
    clear: both;
}

• 2. 补充写法

.clearfix::after {
    content: ''；
    display: block;
    clear: both;
    /* 补充代码：在网页中看不到伪元素  */
    height: 0;
    visibility: hidden;
    }

• 特点：
• • 优点：项目中使用，直接给标签加类即可清除浮动

---

清楚浮动的方法-4双伪元素清除法

• 操作：

/* .clearfix::before,Z作用：解决外边距塌陷问题 */
.clearfix::before,
.clearfix::after {
    content:'';
    disPlay: table;
}
.clearfix::after {
    clear:both;
}

---

清楚浮动的方法——5给父元素设置overflow：hidden

操作：

• 直接给父元素设置 overflow：hidden 特点：
• 优点：方便