CSS布局(结构伪类选择器与伪元素)

一. 结构伪类选择器

使用结构伪类选择器 在HTML中定位元素

1. 作用与优势：

   作用：根据元素在HTML中的结构关系查找元素

   优势：减少对于HTML中类的依赖，有利于保持代码整洁

   场景：常用于查找某父级选择器中的子元素

2. 选择器

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

​

3. n的注意点：

4. n为：0、1、2、3、4、5、6、……

5. 通过n可以组成常见公式

功能	公式
偶数	2n, even
奇数	2n+1, 2n-1, odd
找到前5个	-n+5
找到从第五个往后	n+5

二. 伪元素

一般页面中的非主体内容可以使用伪元素

区别：

1. 元素：HTML 设置的标签
2. 伪元素：由 CSS 模拟出的标签效果

种类：

伪元素	作用
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

注意点：

1. 必须设置content属性才能生效
2. 伪元素默认是行内元素

三. 标准流

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见标准流排版规则：

1. 块级元素：从上往下，垂直布局，独占一行
2. 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行