CSS选择器基础
CSS选择器是定位HTML元素并应用样式的机制，是CSS的核心组成部分。
选择器作用
CSS
选择器 {
属性: 值;
}
/* 示例 */
p {
color: red;
}
选择器分类
| 类型 | 说明 | 示例 |
|---|---|---|
| 标签选择器 | 按元素名选中 | p |
| 类选择器 | 按 class 属性 | .box |
| ID选择器 | 按 id 属性 | #header |
| 属性选择器 | 按属性匹配 | [type="text"] |
| 伪类选择器 | 按状态匹配 | :hover |
| 伪元素选择器 | 创建虚拟元素 | ::before |
| 组合选择器 | 组合多个选择器 | div p |
基础选择器
CSS
/* 标签选择器 */
p { color: blue; }
/* 类选择器 */
.highlight { background: yellow; }
/* ID选择器 */
#logo { width: 200px; }
/* 通配选择器 */
* { margin: 0; }
选择器权重
选择器之间存在优先级，权重越高越优先：
| 选择器 | 权重 | |
|---|---|---|
| 内联样式 | 1000 | |
| ID选择器 | 100 | |
| 类/伪类/属性选择器 | 10 | |
| 标签/伪元素选择器 | 1 | |
| 通配选择器 | 0 |
注意：权重相同时，后定义的样式生效。
要点总结
- 选择器是CSS匹配HTML元素的规则
- 基础选择器包括标签、类、ID、通配选择器
- 不同选择器有不同的权重值
- 权重决定样式优先级
存放路径：articles/CSS/入门/CSS选择器/CSS选择器基础.md
📝 发现内容有误？点击此处直接编辑