🔹一、基础选择器（Basic Selectors）
| 语法 | 名称 | 示例 | 说明 |
|---|
* | 通配选择器 | * {margin: 0;} | 选择所有元素 |
element | 标签选择器 | p {color: red;} | 选择所有 <p> 标签 |
.class | 类选择器 | .btn {color: blue;} | 选择所有 class="btn" 的元素 |
#id | ID选择器 | #header {font-size: 20px;} | 选择 id="header" 的元素 |
element.class | 标签+类选择器 | button.primary {background: green;} | 指定类的指定元素 |
🔹二、组合选择器（Combination Selectors）
| 语法 | 名称 | 示例 | 说明 |
|---|
A B | 后代选择器 | div p {} | 选择 div 内所有 p |
A > B | 子元素选择器 | ul > li {} | 只选择直接子元素 |
A + B | 相邻兄弟选择器 | h2 + p {} | 选择紧挨着的 p |
A ~ B | 通用兄弟选择器 | h2 ~ p {} | 所有在 h2 后面的 p |
🔹三、伪类选择器（Pseudo-classes）
| 语法 | 名称 | 示例 | 说明 |
|---|
:hover | 鼠标悬停 | a:hover {} | 鼠标悬停时样式 |
:active | 激活 | button:active {} | 鼠标点击时样式 |
:focus | 获得焦点 | input:focus {} | 输入框被点击时 |
:first-child | 第一个子元素 | li:first-child {} | 选择父元素的第一个子元素 |
:last-child | 最后一个子元素 | li:last-child {} | 同理，最后一个 |
:nth-child(n) | 第n个子元素 | li:nth-child(2) {} | 选择第2个子元素 |
:not(X) | 非X的元素 | div:not(.active) {} | 排除某些元素 |
🔹四、伪元素选择器（Pseudo-elements）
| 语法 | 名称 | 示例 | 说明 |
|---|
::before | 内容前 | h1::before {content: "*";} | 添加内容前缀 |
::after | 内容后 | h1::after {content: ".";} | 添加内容后缀 |
::first-letter | 首字母 | p::first-letter {font-size: 200%;} | 放大首字母 |
::first-line | 首行 | p::first-line {} | 首行样式 |
::selection | 选中文本 | ::selection {background: yellow;} | 文本被选中时 |
🔹五、属性选择器（Attribute Selectors）
| 语法 | 名称 | 示例 | 说明 |
|---|
[attr] | 有该属性 | [disabled] {} | 有 disabled 属性的元素 |
[attr=value] | 属性值等于 | [type="text"] {} | 属性值为 text 的 input |
[attr^=value] | 属性值开头 | [href^="https"] {} | 开头是 https 的链接 |
[attr$=value] | 属性值结尾 | [src$=".jpg"] {} | 后缀为 .jpg 的图片 |
[attr*=value] | 属性值包含 | [title*="提示"] {} | 含有"提示"二字的 title |
🔹六、层叠与优先级规则（Cascading & Specificity）
| 类型 | 示例 | 优先级（高 → 低） |
|---|
| 内联样式 | <div style=""> | 1000 |
| ID选择器 | #id | 0100 |
| 类、伪类、属性选择器 | .class, :hover, [type="text"] | 0010 |
| 标签选择器、伪元素 | div, ::after | 0001 |
| 通配符或继承 | *, body div | 0000 |
⚠️ 多个规则冲突时，以优先级高的为准，若优先级一样，则后写的覆盖前写的。
🔹七、重要性控制
| 语法 | 名称 | 示例 | 优先级 |
|---|
!important | 强制优先 | color: red !important; | 最大（慎用） |
