第04篇基础选择器大全选择器是 CSS 的瞄准镜——它决定了你的样式会作用到哪些元素。掌握选择器是 CSS 学习的核心基础就像学会用笔才能写字一样。本篇将系统讲解所有基础选择器的用法和优先级权重。学习目标掌握元素选择器、类选择器、ID 选择器、通配符选择器、群组选择器理解每种选择器的优先级权重能够根据场景选择最合适的选择器学会使用选择器权重计算解决样式冲突了解选择器的命名规范和最佳实践核心知识点一、选择器概述选择器告诉浏览器“我要选中页面中的哪些元素给它们应用这些样式。”选择器{属性:值;}CSS 提供了几十种选择器从最简单的元素名到复杂的伪类伪元素。本篇先掌握最基础的五种。二、元素选择器 (Type Selector)选中指定标签类型的所有元素。/* 选中页面中所有的 p 标签 */p{color:#333;line-height:1.8;}/* 选中所有 h1 ~ h6 */h1, h2, h3, h4, h5, h6{font-family:PingFang SC,sans-serif;color:#1a1a2e;}/* 选中所有 a 标签 */a{color:#4a90d9;text-decoration:none;}/* 选中所有 button */button{cursor:pointer;border:none;padding:10px 20px;}特点覆盖面广影响所有同类元素优先级最低权重 1适合设置全局默认样式适用场景重置浏览器默认样式设置全站基础排版字体、行高、链接颜色不希望被覆盖的全局规则三、类选择器 (Class Selector) ⭐最常用选中所有带有指定class属性的元素。!-- HTML --buttonclassbtn普通按钮/buttonbuttonclassbtn btn-primary主要按钮/buttonbuttonclassbtn btn-danger危险按钮/button/* CSS 中用 . 开头 */.btn{display:inline-block;padding:10px 24px;font-size:16px;border-radius:6px;cursor:pointer;transition:all 0.3s ease;}/* 基础按钮样式 */.btn{background:#f0f0f0;color:#333;border:1px solid #ddd;}/* 主要按钮蓝色 */.btn-primary{background:#4a90d9;color:white;border-color:#4a90d9;}/* 危险按钮红色 */.btn-danger{background:#e74c3c;color:white;border-color:#e74c3c;}特点一个元素可以有多个类名空格分隔同一个类名可以在多个元素上复用权重适中权重 10最推荐的选择器类型多类名的妙用!-- 组合使用像搭积木一样构建样式 --divclasscard card-featured这是一个带有推荐标记的卡片/div.card{background:white;padding:20px;border:1px solid #e0e0e0;border-radius:8px;}/* 推荐卡片在普通卡片基础上增加高亮边框 */.card-featured{border-color:#4a90d9;border-width:2px;}四、ID 选择器 (ID Selector)选中具有指定id属性的唯一元素。!-- HTMLid 在同一页面中应该唯一 --headeridsite-header网站头部/headermainidmain-content主要内容区/mainfooteridsite-footer页脚/footer/* CSS 中用 # 开头 */#site-header{background:#1a1a2e;color:white;padding:20px 40px;}#main-content{max-width:1200px;margin:0 auto;padding:40px 20px;}#site-footer{background:#f5f5f5;text-align:center;padding:30px;}特点权重很高权重 100在同一 HTML 页面中id 应该是唯一的不适合复用适用场景页面级的大区块header、main、footer需要 JavaScript 操作的特定元素单页应用中的锚点导航目标⚠️ 为什么不推荐用 ID 选择器写样式/* ❌ 不推荐权重过高难以覆盖 */#sidebar .nav-item{color:red;}/* 权重 100 10 110 *//* 后面想覆盖这个颜色几乎不可能除非用更高权重或 !important */.sidebar-nav .item{color:blue;}/* 权重 10 10 20覆盖不了*/原则用class 选择器写样式用id做页面结构和 JS 操作。五、通配符选择器 (Universal Selector)选中所有元素。/* 选中页面中的每一个元素 */*{margin:0;padding:0;}最常见的用途CSS Reset/* 重置所有元素的内外边距 */*{margin:0;padding:0;box-sizing:border-box;/* 让 padding 和 border 不增加元素总尺寸 */}特点权重最低权重 0性能开销相对较大需要匹配所有元素通常只用于全局重置⚠️ 注意/* ❌ 不要这样用通配符 复杂属性 */*{color:red;/* 会影响所有元素包括你不想改的 */border:1px solid black;}/* ✅ 应该这样只做简单的重置 */*{margin:0;padding:0;box-sizing:border-box;}六、群组选择器 (Grouping Selector)用逗号分隔多个选择器共享同一套样式。/* 给 h1, h2, h3 设置相同的字体 */h1, h2, h3{font-family:PingFang SC,Microsoft YaHei,sans-serif;color:#1a1a2e;}/* 同时重置多个元素的默认样式 */body, h1, h2, h3, h4, p, ul, ol{margin:0;padding:0;}/* 不同层级的选择器也可以组合 */.site-header, .site-footer, .sidebar{background:#f5f5f5;padding:20px;}注意陷阱/* ❌ 错误这条规则的含义是选中的 a 内部的 b不是a 和 b */a, b{color:red;}/* ✅ 正确写法 */a, b{color:red;}七、选择器优先级权重详解权重计算规则/* * 权重 a-b-c-d * a 1 如果样式来自 style否则为 0 * b ID 选择器的数量 * c 类/伪类/属性选择器的数量 * d 元素/伪元素选择器的数量 */实战计算/* 0-0-0-1 权重 1 */p{}/* 0-0-1-0 权重 10 */.text{}/* 0-1-0-0 权重 100 */#header{}/* 0-0-0-0 权重 0 */*{}/* 0-0-2-0 权重 20 */.btn.primary{}/* 0-0-1-1 权重 11 */p.text{}/* 0-1-1-0 权重 110 */#nav .item{}/* 1-0-0-0 权重 1000 *//* p stylecolor: red; */权重比较示例style#title{color:red;}/* 权重: 0-1-0-0 100 */.headline{color:blue;}/* 权重: 0-0-1-0 10 */h1{color:green;}/* 权重: 0-0-0-1 1 */*{color:purple;}/* 权重: 0-0-0-0 0 *//style!-- 最终颜色: 红色 (red) --h1idtitleclassheadline标题/h1权重相等时后覆盖前.text{color:red;}/* 先定义 */.text{color:blue;}/* 后定义最终生效 *//* 最终颜色: 蓝色 (blue) */八、选择器命名规范BEM 命名法推荐BEM Block块 Element元素 Modifier修饰符!-- 块独立的组件 --divclasscard!-- 元素块的子部分用 __ 连接 --imgclasscard__imagesrcphoto.jpgalth3classcard__title卡片标题/h3pclasscard__desc卡片描述/p!-- 修饰符变体状态用 -- 连接 --buttonclasscard__button card__button--primary主要按钮/buttonbuttonclasscard__button card__button--disabled禁用按钮/button/div.card{}.card__image{}.card__title{}.card__desc{}.card__button{}.card__button--primary{}.card__button--disabled{}命名黄金法则✅ 推荐❌ 避免.user-card.userCard/.user_card.nav-item.ni/.n1.btn-primary.button1/.red-button.sidebar.s/.side语义化名称描述作用描述外观.red/.big/.left为什么不用外观命名/* ❌ 不好如果有一天红色按钮要改成蓝色 */.red-button{background:red;}/* ✅ 好用语义命名 */.btn-danger{background:red;/* 危险操作的按钮颜色可以改 */}/* ✅ 更好用 BEM */.btn--danger{background:red;}九、完整示例选择器综合运用!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title选择器综合运用/titlestyle/* 全局重置通配符 群组选择器 */*, *::before, *::after{box-sizing:border-box;}body, h1, h2, p, ul{margin:0;padding:0;}/* 基础排版元素选择器 */body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;background:#f5f5f5;padding:40px 20px;}h1, h2{color:#1a1a2e;margin-bottom:16px;}p{color:#555;line-height:1.8;}a{color:#4a90d9;text-decoration:none;}/* 页面结构ID 选择器 */#main-content{max-width:800px;margin:0 auto;background:white;padding:40px;border-radius:12px;}/* 按钮组件类选择器 */.btn{display:inline-block;padding:10px 24px;font-size:16px;border-radius:6px;border:none;cursor:pointer;transition:all 0.3s ease;}.btn--primary{background:#4a90d9;color:white;}.btn--primary:hover{background:#357abd;}.btn--secondary{background:#f0f0f0;color:#333;}.btn--secondary:hover{background:#e0e0e0;}/* 卡片组件BEM命名 */.feature-card{border:1px solid #e0e0e0;border-radius:8px;padding:24px;margin-bottom:20px;}.feature-card__icon{font-size:40px;margin-bottom:16px;}.feature-card__title{font-size:1.25rem;margin-bottom:8px;}.feature-card__desc{font-size:0.95rem;}.feature-card--highlight{border-color:#4a90d9;background:#f0f7ff;}/style/headbodymainidmain-contenth1选择器综合运用/h1divclassfeature-carddivclassfeature-card__icon/divh3classfeature-card__title快速启动/h3pclassfeature-card__desc几行代码即可搭建现代化界面。/pbuttonclassbtn btn--secondary了解更多/button/divdivclassfeature-card feature-card--highlightdivclassfeature-card__icon⭐/divh3classfeature-card__title推荐功能/h3pclassfeature-card__desc高亮显示的推荐功能卡片。/pbuttonclassbtn btn--primary立即使用/button/div/main/body/html动手练习练习 1选择器优先级实验创建以下 HTML 和 CSS预测每个元素的颜色style*{color:gray;}p{color:green;}.text{color:blue;}#special{color:red;}p.text{color:orange;}/stylep普通段落绿色/ppclasstext带类的段落蓝色/ppidspecial带ID的段落红色/ppidspecialclasstextID类的段落什么颜色/p先在心里预测每个元素的颜色在浏览器中验证你的预测用 DevTools 的 Computed 面板查看实际生效的规则练习 2BEM 命名实践为一个文章列表组件设计 BEM 类名!-- 请为以下元素设计合适的 BEM 类名 --divclass???articleclass???imgclass???srcthumb.jpgaltdivclass???h2class???文章标题/h2pclass???文章摘要.../pspanclass???2024-01-01/span/div/article/div按照 BEM 规范命名每个class为置顶文章设计一个修饰符类名写出对应的 CSS 规则练习 3重构糟糕的类名以下代码的类名很差请用 BEM 规范重写divclassboximgclasspicsrcavatar.jpgdivclassinfoh3classname用户名/h3pclassbio个人简介/p/divbuttonclassbtn-blue关注/button/div用有意义的语义命名替代.box、.pic等用 BEM 连接元素和修饰符把.btn-blue改成语义化的修饰符常见误区 ⚠️误区真相“ID 选择器权重高所以用它写样式最好”ID 权重过高会导致难以覆盖和扩展。样式应该用 classid 留给 JS 和锚点“类名越短越好方便打字”.ni这种缩写过段时间连自己都看不懂。语义清晰比简短更重要“一个元素只能有一个 class”一个元素可以有多个 class用空格分隔。这是 CSS 组合样式的核心技巧“* { margin: 0; padding: 0; }是万能重置”通配符选择器性能开销较大且会覆盖有用的默认样式。推荐使用针对性的重置“选择器写得越具体越好”过于具体的选择器如body #header .nav ul li a权重过高且难以复用“用!important解决优先级问题”!important应该只在覆盖第三方库的样式时谨慎使用。滥用会导致样式表失控“类名用驼峰命名userCard”CSS 类名推荐使用短横线连接user-card。驼峰命名在 JS 中更常见速查卡片 基础选择器速查选择器符号示例权重说明元素选择器无p1选中所有该类型元素类选择器..btn10选中所有带该 class 的元素ID 选择器##header100选中唯一元素通配符选择器**0选中所有元素群组选择器,h1, h2各自计算共享样式权重记忆口诀内联一千ID一百 类名属性伪类十 元素伪元素是个一 通配符零要牢记。BEM 命名模板块名.block 元素.block__element 修饰符.block--modifier .block__element--modifier选择器选择指南场景推荐选择器全局默认样式元素选择器body,p,a可复用组件类选择器.btn,.card页面大区块ID 选择器#header,#main全局重置通配符*少量属性多个元素共享样式群组选择器h1, h2, h3扩展阅读MDN: CSS 选择器MDN: 优先级BEM 官方文档英文CSS-Tricks: 优先级详解英文选择器游戏英文通过游戏学习选择器下一步进入 第05篇关系选择器与属性选择器学习更精准地选中特定位置的元素。