CSS（二）CSS核心选择器
CSS核心选择器
选择器是CSS精准控制元素的核心，本模块覆盖简历开发中90%以上会用到的选择器类型，配套优先级规则，彻底解决「样式写了不生效」的问题。
1. 基础选择器
| 选择器类型 | 语法格式 | 作用与特点 | 示例 |
|---|---|---|---|
| 通配符选择器 | * { 属性:值; } | 匹配页面中所有元素，常用于全局样式重置 | * { margin:0; padding:0; box-sizing:border-box; } |
| 标签选择器（元素选择器） | 标签名 { 属性:值; } | 选中页面中所有对应标签，统一一类元素的基础样式 | p { line-height: 1.8; } |
| 类选择器 | .类名 { 属性:值; } | 选中所有带对应class属性的元素，可复用、可多类叠加，开发中最常用 | .title { font-size: 24px; font-weight: bold; } |
| ID选择器 | #ID名 { 属性:值; } | 选中页面中唯一对应id属性的元素，不可复用，优先级高 | #resume-header { text-align: center; } |
开发规范：类名/ID名不能以数字开头，严格区分大小写；一个标签可添加多个类名（空格分隔），一个页面中ID必须唯一。
2. 关系选择器（复合选择器）
用于精准选中嵌套结构中的元素，完美适配简历的层级化HTML结构。
| 选择器类型 | 语法格式 | 作用 | 示例 |
|---|---|---|---|
| 后代选择器 | 父元素 子元素 { } | 选中父元素内所有匹配的后代元素（包括子、孙层级） | .resume li { margin: 8px 0; } |
| 子代选择器 | 父元素 > 子元素 { } | 仅选中父元素的直接一级子元素（亲儿子） | .info-list > li { font-weight: 500; } |
| 交集选择器（标签指定式） | 标签名.类名 { } | 选中同时满足「指定标签+指定类名」的元素 | p.desc { color: #666; } |
| 并集选择器 | 选择器1,选择器2 { } | 同时选中多个选择器匹配的元素，用于合并重复样式 | h1,h2,h3 { margin: 0; font-family: "微软雅黑"; } |
| 相邻兄弟选择器 | 元素1 + 元素2 { } | 选中紧邻元素1后方、同级的元素2 | .title + p { text-indent: 2em; } |
| 通用兄弟选择器 | 元素1 ~ 元素2 { } | 选中元素1后方所有同级的元素2 | .title ~ p { color: #555; } |
3. 基础伪类选择器
用于选中元素的特殊状态，实现简历的交互效果，核心分为链接伪类和结构伪类。
（1）链接/交互伪类（简历中按钮、链接必用）
| 伪类 | 作用 | 生效顺序 |
|---|---|---|
a:link | 选中未被访问的超链接 | 1 |
a:visited | 选中已被访问的超链接 | 2 |
:hover | 选中鼠标悬停的元素（不限于a标签） | 3 |
:active | 选中鼠标点击未松开的元素 | 4 |
注意：链接伪类必须按
link→visited→hover→active的顺序声明，否则样式会失效。
（2）基础结构伪类（简历列表、模块排版必用）
| 伪类 | 作用 | 简历应用场景 |
|---|---|---|
E:first-child | 选中父元素中第一个子元素E | 给列表第一项去掉上外边距 |
E:last-child | 选中父元素中最后一个子元素E | 给列表最后一项去掉下外边距 |
E:nth-child(n) | 选中父元素中第n个子元素E，n可填数字、odd（奇数）、even（偶数）、公式 | 给简历经历列表实现隔行变色 |
E:only-child | 选中父元素中唯一的子元素E | 单独处理单条内容的样式 |
4. CSS三大特性（继承性、层叠性、优先级）
这是CSS的核心底层逻辑，彻底解决「样式冲突、写了不生效」的问题。
（1）继承性
子元素会自动继承父元素的文本类属性，布局类属性无法继承。
- 可继承属性：
color、font-系列、text-系列、line-height等文本相关属性； - 不可继承属性：
width/height、margin/padding、border、定位、背景等布局相关属性。
（2）层叠性
当相同选择器给同一个元素设置相同属性时，写在后面的样式会覆盖前面的冲突样式，不冲突的样式不会被覆盖。
（3）优先级
当不同选择器给同一个元素设置冲突样式时，按权重优先级生效，权重规则从高到低：
!important（强制最高优先级，非特殊情况不推荐使用）- 内联样式（style属性）
- ID选择器
- 类选择器、伪类选择器、属性选择器
- 标签选择器、伪元素选择器
- 通配符选择器
- 浏览器默认样式
- 继承的样式
权重计算规则：复合选择器的权重可叠加，ID选择器权重记为a，类/伪类记为b，标签选择器记为c；权重比较先看a的数量，a相同再看b，b相同再看c。例：
#father .son p权重为 a=1, b=1, c=1。