伪类用于定义元素状态，如:hover、:focus、:not()；伪元素创建抽象内容，如::before、::after、::first-letter，提升样式灵活性与可访问性。
伪类和伪元素是CSS中非常实用的特性，它们帮助开发者在不改变HTML结构的前提下，为特定状态或内容片段添加样式。虽然名字相似，但两者用途和语法略有不同。下面详细介绍常用伪类与伪元素的使用方法。
:hover 伪类 —— 鼠标悬停时触发样式
当用户将鼠标指针移动到某个元素上时，:hover 会激活对应样式，常用于按钮、链接等交互元素。
示例：
a:hover { color: red; }
这会让链接在鼠标悬停时变为红色。
不仅限于链接，任何元素都可以使用 :hover，比如高亮整个卡片区域或显示隐藏内容。
:focus 伪类 —— 元素获得焦点时生效
当用户通过键盘Tab键或点击使表单元素（如 input、button）获得焦点时，:focus 被触发，有助于提升可访问性。
示例：
input:focus { border-color: blue; outline: none; box-shadow: 0 0 5px blue; }
这样可以让用户清楚地看到当前正在操作的输入框。
::before 和 ::after 伪元素 —— 插入装饰性内容
这两个伪元素允许你在元素内容前或后插入生成的内容，常用于添加图标、引号、清除浮动等。
关键点：- 必须设置
content属性，即使为空（content: ""） - 默认为行内元素，可通过 display 修改
- 不能选中或复制生成的内容，仅用于视觉展示
p::before { content: "▶ "; color: gray; }
每个段落前都会出现一个灰色箭头符号。
:nth-child(n) 与 :nth-of-type(n) —— 精准定位子元素
用于选择父元素下的第n个子元素，适合实现隔行变色、布局控制等。
区别说明：- :nth-child(2) 选择的是父元素下的第二个子节点，不管类型
- :nth-of-type(2) 只计算同类型的元素，比如第二个 p 标签
tr:nth-child(even) { background: #f2f2f2; }
实现表格隔行着色。
::first-line 与 ::first-letter —— 文本排版利器
主要用于段落的首行或首字母样式设计，常见于文章页面。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
p::first-letter { font-size: 2em; float: left; margin-right: 5px; }
实现首字母下沉效果。
p::first-line { font-weight: bold; }
让段落首行加粗。
这些伪元素只能应用于块级元素，且仅对第一个格式化行或字母起作用。
:not() 伪类 —— 排除特定元素
选择不符合指定条件的元素，增强选择器灵活性。
示例：
div:not(.special) { opacity: 0.8; }
所有不包含 class="special" 的 div 都会应用半透明效果。
支持多种参数，如标签名、属性选择器等，提高筛选精度。
总结：伪类 vs 伪元素
伪类以单冒号表示（如 :hover），描述元素的特殊状态；伪元素使用双冒号（如 ::before），代表文档中不存在的抽象元素。
CSS3规范推荐伪元素使用双冒号以区分伪类，但为了兼容旧浏览器，单冒号仍被广泛接受。
合理使用这些特性，能减少冗余HTML标签，让代码更简洁，样式更动态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
