🔹一、基础选择器（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; |
最大（慎用） |