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