CSS 学习手册

伪类选择器用于定义元素的特殊状态，例如鼠标悬停、访问链接、焦点等。 **常用伪类：** - **:hover** – 鼠标悬停时 - **:active** – 元素被激活（点击时） - **:focus** – 元素获得焦点（如 input） - **:visited** – 已访问的链接 - **:link** – 未访问的链接 ```css a:hover { color: orange; text-decoration: underline; } input:focus { border-color: #66afe9; box-shadow: 0 0 8px rgba(102,175,233,0.6); } ``` **结构伪类：** - **:first-child** – 父元素下的第一个子元素 - **:last-child** – 父元素下的最后一个子元素 - **:nth-child(n)** – 父元素下的第 n 个子元素 - **:nth-of-type(n)** – 父元素下同类型的第 n 个元素 ```css li:first-child { font-weight: bold; } tr:nth-child(even) { background: #f9f9f9; } /* 偶数行斑马纹 */ ``` **其他：** - **:not(selector)** – 排除匹配指定选择器的元素 - **:empty** – 没有子元素（包括文本）的元素 - **:checked** – 被选中的表单元素（radio/checkbox）