基础选择器
| 类型 | 选择器语法 | 说明 | 示例 | 效果 |
|---|---|---|---|---|
| 元素选择器 | element | 选择指定 HTML 标签的所有元素 | p { color: red; } | 所有 <p> 文本变为红色 |
| 类选择器 | .class | 选择具有指定 class 的元素 | .btn { padding: 10px; } | 所有 class="btn" 元素增加内边距 |
| ID 选择器 | #id | 选择具有指定 ID 的唯一元素 | #header { width: 100%; } | ID 为 header 的元素宽度设为 100% |
| 通配符选择器 | * | 选择页面中所有元素 | * { margin: 0; } | 所有元素外边距清零（常用于重置样式） |
组合选择器
| 类型 | 选择器语法 | 说明 | 示例 | 效果 |
|---|---|---|---|---|
| 后代选择器 | A B | 选择 A 元素内部的所有 B 后代元素（包括子、孙等） | div p { font-size: 16px; } | 所有在 <div> 内的 <p> 字号设为 16px |
| 子元素选择器 | A > B | 选择 A 的 **直接子元素 **B | ul > li { list-style: square; } | 只有 <ul> 的直接子 <li> 使用方块符号 |
| 相邻兄弟选择器 | A + B | 选择紧接在 A 元素后的 **第一个 **同级 B 元素 | h1 + p { margin-top: 0; } | 紧跟 <h1> 的第一个 <p> 上边距为 0 |
| 通用兄弟选择器 | A ~ B | 选择 A 元素后所有同级的 B 元素 | input:checked ~ label { color: green; } | 被选中的 checkbox 后的所有 label 变绿色 |
属性选择器
| 类型 | 选择器语法 | 说明 | 示例 | 效果 |
|---|---|---|---|---|
| 属性存在选择器 | [attr] | 选择具有指定属性的元素 | a[title] { border: 1px solid gray; } | 所有带 title 属性的链接加边框 |
| 属性值等于 | [attr="value"] | 属性值完全匹配 | img[src="logo.png"] { width: 100px; } | 源地址为 logo.png 的图片设宽 100px |
| 属性值包含单词 | [attr~="word"] | 属性值中包含某个 独立单词（空格分隔） | p[class~="highlight"] { background: yellow; } | class="info highlight" 的段落高亮 |
| 属性值以...开头 | [attr^="val"] | 属性值以指定字符串 开头 | a[href^="https"] { color: blue; } | 所有 HTTPS 链接显示为蓝色 |
| 属性值以...结尾 | [attr$=".pdf"] | 属性值以指定字符串 结尾 | a[href$=".pdf"]::after { content: " (PDF)"; } | PDF 链接后添加 (PDF) 提示 |
| 属性值包含子串 | [attr*="str"] | 属性值包含指定字符串（任意位置） | img[src*="banner"] { opacity: 0.8; } | 图片路径含 banner 的透明度降低 |
伪类选择器
| 类型 | 选择器语法 | 说明 | 示例 | 效果 |
|---|---|---|---|---|
:hover | :hover | 鼠标悬停时 | button:hover { background: gray; } | 鼠标移到按钮上背景变灰 |
:focus | :focus | 元素获得焦点（如输入框） | input:focus { outline: 2px solid blue; } | 输入框聚焦时有蓝色轮廓 |
:active | :active | 元素被激活（如点击时） | a:active { color: red; } | 链接点击瞬间变红 |
:visited | :visited | 已访问过的链接 | a:visited { color: purple; } | 链接点击瞬间变红 |
:first-child | :first-child | 作为父元素的 第一个子元素 | li:first-child { font-weight: bold; } | 列表第一项加粗 |
:last-child | :last-child | 作为父元素的 最后一个子元素 | li:last-child { color: gray; } | 列表最后一项变灰 |
:nth-child(n) | :nth-child(n) | 第 n 个子元素（支持公式 2n+1） | tr:nth-child(odd) { background: #eee; } | 表格奇数行背景色交替 |
:nth-of-type(n) | :nth-of-type(n) | 同类型标签中的第 n 个 | p:nth-of-type(2) { margin-top: 20px; } | 第二个 <p> 上边距加大 |
:not(selector) | :not(...) | 选择 **不匹配 **该选择器的元素 | div:not(.sidebar) { width: 100%; } | 所有非 .sidebar 的 div 宽度 100% |
:checked | :checked | 选中的单选/复选框 | input:checked + label { font-weight: bold; } | 选中项的 label 加粗 |
:disabled | :disabled | 被禁用的表单元素 | input:disabled { opacity: 0.5; } | 禁用输入框半透明 |
:first-of-type | :first-of-type | 同类型中的第一个 | h2:first-of-type { margin-top: 0; } | 页面第一个 h2 上边距为 0 |
:last-of-type | :last-of-type | 同类型中的最后一个 | img:last-of-type { border: none; } | 最后一个图片无边框 |
伪元素选择器
| 类型 | 选择器语法 | 说明 | 示例 | 效果 |
|---|---|---|---|---|
::before | ::before | 在元素内容前插入内容 | p::before { content: "▶ "; } | 每个段落前加一个箭头 |
::after | ::after | 在元素内容后插入内容 | a::after { content: " →"; } | 链接后加右箭头 |
::first-line | ::first-line | 选择文本第一行 | p::first-line { font-weight: bold; } | 段落首行加粗 |
::first-letter | ::first-letter | 选择文本第一个字母 | p::first-letter { font-size: 2em; } | 首字母放大（常用于杂志排版） |
::selection | ::selection | 用户选中文本时的样式 | ::selection { background: yellow; } | 选中文本背景变黄 |
