CSS伪类：
1.伪类的概念：
可以理解为描述元素的某种状态，用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。
2.伪类的语法：
标签:伪类{设置的样式，伪类可以与 CSS 类配合使用}
/* 鼠标覆盖在元素上面显示红色 */div:hover{background-color: red;}3.伪类的常用实例
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
4.常用伪类：
| 伪类选择器 | 例子 | 作用 |
|---|---|---|
| :hover | a:hover | 鼠标覆盖在元素上状态 |
| :active | a:active | 鼠标在元素上并按下左键 |
| :link | a:link | 元素链接点击前的样式 |
| :visited | a:visited | 元素链接点击后的样式 |
| :focus | input:focus | 获取焦点的样式 |
| :frst-child | li:first-child | 第一个子级 |
| :frst-of-type | ul li:first-of-type | 特定的第一个子级 |
| :last-child | li:last-child | 最后一个子级 |
| :last-of-type | ul li:last-child | 特定的最后一个子级 |
| :nth-child(n) | li:nth-child(2n) | 第n个子元素（2n为2的倍数） |
| :nth-of-type(n) | li:nth-of-type(3n+1) | 指定类型的第n个子元素（3n+1为3的倍数+1） |
| :nth-last-child(n) | li:nth-last-child(n) | 倒数第n个子元素 |
| :nth-last-of-type(n) | li:nth-last-of-type(n) | 指定类型的倒数第n个子元素 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类选择器</title><style>div{/* 常态 */width: 100px;height: 100px;background-color: pink;}/* 鼠标覆盖在元素上面显示红色 */div:hover{background-color: red;}a:link{/* 链接前 */color: tomato;}a:visited{/* 链接后 */color: skyblue;}a:hover{/* 鼠标覆盖 */cursor: pointer;/* 鼠标覆盖后变小手效果 */}a:active{/* 响应 *//* 鼠标在元素上并按下左键 */color:pink;}input{outline: 0;}input:focus{/* 获取焦点 （获取光标） */border: 2px solid orange;}li:first-child{/* 只能是第一个li，li是第一个只级 */color: red;}li:last-child{color: red;}ul li:first-of-type{/* 第一个li类型的标签，li不用是第一个子元素 */color: skyblue;}li:nth-child(2){color:purple;}/* 2n为2的倍数 3n+1等公式*/li:nth-of-type(2n){color: hotpink;}</style>
</head>
<body><div></div><a href="https://ac.csdn.net">CSDN</a><br><input type="text"><ul><h1>送给各位同学</h1><li>劝学诗</li><li>书中自有千钟粟。</li><li>书中自有黄金屋。</li><li>书中有马多如簇。</li><li>书中自有颜如玉。</li></ul>
</body>
</html>
<!-- a标签有4种伪类，建议按顺序书写 -->
<!-- link visited hover active -->
CSS伪元素：
1. 伪元素的概念：
可以理解为某个元素的子元素，但不存在于html中。用于创建一些不在文档树中的元素，并为其添加样式。
2.伪元素的语法：
标签::伪类{设置的样式，伪类可以与 CSS 类配合使用}
p::before{content:"大家好，我是";color:orange;}3.伪元素的常用实例：
- 设置元素的首字母、首行的样式
- 在元素的内容之前或之后插入内容
4.常用伪元素：
| 伪元素选择器 | 例子 | 作用 |
|---|---|---|
| ::before | p::before | 在元素前插入内容 |
| ::after | p::after | 在元素后插入内容 |
| ::selection | p::selection | 选择用户选择的元素部分 |
| ::frst-line | div::first-line | 文本的第一行样式 |
| ::first-letter | div::first-letter | 选择文本的首字母，只用于块元素 |
| ::placeholder | input::placeholder | 只用于表单的提示文本 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪元素</title><style>p{color:skyblue;}p::before{content:"大家好，我是";color:orange;}p::after{content:"，欢迎大家学习c1";color:tomato;}p::selection{color:blue;}div{width:400px;}div::first-line{color: tomato;}div::first-letter{font-size:40px;}input::placeholder{color: pink;}</style>
</head>
<body><p>伪元素</p><div>富家不用买良田,书中自有千钟粟。安居不用架高堂,书中自有黄金屋。出门莫恨无人随,书中车马多如簇。娶妻莫恨无良媒,书中自有颜如玉。男儿若遂平生志,六经勤向窗前读</div><input type="text" placeholder="测试工具">
</body>
</html>
