一、基础选择器（最常用，必须掌握）
1. 通配符选择器*
匹配页面中的所有元素。性能开销较大，通常用于重置样式或全局设置。
css
* { margin: 0; padding: 0; box-sizing: border-box; }2. 标签选择器div
直接选中HTML标签。它的作用域很广，适合重置默认样式。
css
p { color: gray; line-height: 1.5; }3. 类选择器.class
最灵活、最常用的选择器。可以给多个不同的元素赋予同一个类名，实现样式复用。
css
/* 选中所有 class="highlight" 的元素 */ .highlight { background-color: yellow; } /* 选中 class="btn primary" 的元素（组合类） */ .btn.primary { background-color: blue; }4. ID选择器#id
页面中唯一的元素（理论上）。ID的优先级很高，通常用于锚点定位或JavaScript钩子，CSS中应尽量少用，以免导致优先级混乱。
css
#header { position: fixed; top: 0; }二、层级与组合选择器（解决复杂嵌套）
当元素有层级关系时，需要区分“后代”、“儿子”、“兄弟”。
| 选择器 | 符号 | 含义 | 示例 |
|---|---|---|---|
| 后代选择器 | 空格 | 选中所有符合条件的子孙元素 | div p选中div里的所有p |
| 子代选择器 | > | 只选中直接儿子元素 | div > p只选儿子p，不管孙子 |
| 相邻兄弟 | + | 选中紧挨着的下一个兄弟 | h1 + p选紧跟在h1后面的第一个p |
| 通用兄弟 | ~ | 选中之后的所有兄弟 | h1 ~ p选h1后面所有的兄弟p |
实战案例：
css
/* 导航栏激活状态（只有直接子级 li.active） */ .nav > li.active { background: red; } /* 文章内，标题后面的第一个段落不需要首行缩进 */ h2 + p { text-indent: 0; }三、属性选择器（动态精准匹配）
根据元素的属性或属性值来选中元素，非常适用于输入框或自定义属性。
| 写法 | 含义 |
|---|---|
[attr] | 只要包含该属性即可 |
[attr="value"] | 完全匹配 |
[attr^="val"] | 以val开头 |
[attr$="val"] | 以val结尾 |
[attr*="val"] | 包含val字符串 |
[attr~="val"] | 属性值是用空格隔开的列表，其中包含val |
css
/* 选中所有 type="text" 的输入框 */ input[type="text"] { border: 1px solid #ccc; } /* 选中所有 href 以 https 开头的安全链接 */ a[href^="https"] { padding-right: 20px; background: url(lock.svg) no-repeat right; } /* 选中所有下载链接（以 .pdf .zip 等结尾） */ a[href$=".pdf"]::after { content: " [PDF]"; }四、伪类选择器（基于状态与位置）
伪类以冒号:开头，用于选中处于特定状态的元素。
1. 动态伪类（交互状态）
css
/* 未访问链接 */ a:link { color: blue; } /* 鼠标悬停 */ button:hover { background: darkblue; } /* 点击瞬间 */ a:active { color: red; } /* 获得焦点 */ input:focus { outline: none; box-shadow: 0 0 5px gold; }2. 结构伪类（重点中的重点）
无需添加额外的class，仅通过元素在DOM树中的位置进行选择。
css
/* 第一个孩子 */ li:first-child { font-weight: bold; } /* 最后一个孩子 */ li:last-child { border-bottom: none; } /* 第3个孩子 (从1开始计数) */ li:nth-child(3) { background: #eee; } /* 偶数行 (2n 或 even) */ tr:nth-child(even) { background: #f9f9f9; } /* 奇数行 (2n+1 或 odd) */ tr:nth-child(odd) { background: #fff; } /* 倒数第2个 */ li:nth-last-child(2) { color: red; } /* 同类型中的第1个（忽略其他类型元素干扰） */ p:first-of-type { font-size: 1.2em; }注意：nth-child看所有兄弟，nth-of-type只看同标签的兄弟。
3. 表单相关伪类
css
/* 可用与禁用 */ input:enabled { background: white; } input:disabled { background: #eee; cursor: not-allowed; } /* 选中复选框或单选框时 */ input[type="checkbox"]:checked + span { text-decoration: line-through; } /* 输入有效/无效（配合pattern或required使用） */ input:valid { border-color: green; } input:invalid { border-color: red; } /* 必填项 */ input:required { border-left: 3px solid orange; }4. 其他常用伪类
css
/* 否定伪类：排除某些元素 */ input:not([type="submit"]) { width: 100%; } /* 空元素 */ div:empty { display: none; }五、伪元素选择器（制造虚拟内容）
伪元素以双冒号::开头，用于创建不在DOM树中的虚拟元素。
| 伪元素 | 作用 |
|---|---|
::before | 在元素内容的最前面插入内容 |
::after | 在元素内容的最后面插入内容 |
::first-line | 选中块级元素的第一行 |
::first-letter | 选中第一个字（用于首字下沉） |
::selection | 用户选中的文字样式 |
css
/* 经典用法：清除浮动 */ .clearfix::after { content: ""; display: table; clear: both; } /* 首字下沉 */ article p::first-letter { font-size: 3em; font-weight: bold; float: left; margin-right: 5px; } /* 自定义选中颜色 */ ::selection { background: #b0d4ff; color: #000; }六、优先级规则（救急必看）
当多个选择器作用于同一个元素时，谁说了算？记住这个权重口诀：
内联样式 > ID > 类/属性/伪类 > 标签/伪元素
具体计算方式（4位数字）：
千位：内联样式 (
style="...") ——1000百位：ID选择器 (
#id) ——0100十位：类、属性、伪类 (
.class,[type],:hover) ——0010个位：标签、伪元素 (
div,::before) ——0001
css
/* 权重值计算示例 */ * {} /* 0 */ div {} /* 1 */ div p {} /* 2 (两个标签) */ .active {} /* 10 */ .nav li.active {} /* 21 (类+标签+类) */ #header {} /* 100 */重要提示：!important会打破所有规则，除非是用来覆盖第三方库且你无计可施，否则千万别用。
七、实战组合：写出更优雅的代码
css
/* 场景1：表格斑马纹且鼠标划过变高亮 */ tbody tr:nth-child(even):hover { background: #ffe0b3; cursor: pointer; } /* 场景2：除了最后一个按钮，其他的都加右边距 */ .button-group .btn:not(:last-child) { margin-right: 10px; } /* 场景3：自定义数据属性 */ [data-status="completed"] { opacity: 0.6; text-decoration: line-through; }
