基本选择器
元素/类/id/通配符选择器、分组选择器、选择器列表
基本选择器
选择器决定了样式应用到哪些元素——掌握选择器是 CSS 的第一步。
学完本章你将： 掌握元素/类/id/通配符/分组选择器。
五种基本选择器
css
/* 1. 元素选择器：按标签名 */
p { color: blue; }
h1, h2, h3 { font-family: Arial; }
/* 2. 类选择器：按 class（最常用） */
.highlight { background-color: yellow; }
.text-red { color: red; }
/* 3. ID 选择器：按 id（唯一） */
#main-title { font-size: 28px; }
/* 4. 通配符选择器：所有元素 */
* { margin: 0; padding: 0; }
/* 5. 分组选择器：多个选择器共享样式 */
h1, h2, p { color: #333; }组合使用
css
/* 限定元素+类 */
p.intro { font-size: 18px; } /* 只有 class="intro" 的 p */
/* 多个类 */
.btn.primary { background: blue; } /* 同时有 btn 和 primary */
/* 一个元素多个类 */
<div class="btn primary large">按钮</div>class vs id
| class | id | |
|---|---|---|
| 选择器 | `.name` | `#name` |
| 可重复 | ✅ | ❌ 每页唯一 |
| 一个元素 | 多个 class | 一个 id |
| 优先级 | 中 | 高 |
| 用途 | 样式 | JS 操作/锚点 |