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选中未被访问的超链接1a: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个子元素En可填数字、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相同再看bb相同再看c。例#father .son p权重为 a1, b1, c1。