咱就是说CSS 伪类和伪元素，这俩家伙，你懂的，可不是一个东西。好多人一提到就混淆了其实它们是完全不同的概念。就像说一个人是司机，一个人是乘客，你懂的？

简单来说伪类和伪元素dou是用来选择不在文档树中的部分。别被这个词语吓到！它不像选择器那样直接针对 HTML 标签。它们Neng让你给页面上的特定状态或者结构片段添加样式。

比如说你可Neng想给一个链接在鼠标悬停时改变颜色。这不属于链接本身的样式，而是链接“悬停”状态下的样式。这就是伪类发挥作用的地方。

你懂的啊，网页设计可不仅仅是让页面kan起来漂亮而Yi。有时候你需要根据用户的行为、元素的结构来动态地改变页面的样式。这儿就派上用场了！

比如：

鼠标悬停在按钮上时改变背景色

列表中的第一个项目高亮显示

表单字段获得焦点时改变边框颜色

咱们先说说伪类吧。你Ke以把它想象成一个“状态”的选择器。“状态”指的是元素的当前状态。

行为伪类是Zui常见的类型之一。它们描述了元素在特定行为下的状态。

`:hover`：鼠标悬停在元素上方时应用样式

`:active`：元素被点击或激活时应用样式

`:focus`：当键盘焦点落在元素上时应用样式

`:visited`：对Yi访问的链接应用样式

结构伪类用于选择元素的子元素或兄弟元素。

`:first-child`：选择元素的第一个子元素

`:last-child`：选择元素的Zui后一个子元素

`:nth-child`：选择第 n 个子元素

表单伪类与表单字段的状态相关。

`:checked`： checkbox 或 radio button 被选中时应用样式

接下来咱们聊聊伪元素。你Ke以把它理解为一种“结构片段”的选择器。“结构片段”指的是不在 HTML 文档树中的部分。

     在 CSS 中, 单冒号  和双冒号  分别代表着伪类和伪元素。
     这两种表示方式旨在区分两者,大多数浏览器dou支持使用这两种形式。
     理解它们的区别,不仅Neng帮助你写出geng优雅的选择器,还Neng让你在面试中展示扎实的 CSS 基础。