引言：为什么选择器是 CSS 的核心工具？
CSS 选择器如同网页设计的"GPS 导航"，它能精准定位 HTML 元素并赋予样式规则。作为前端开发的核心工具，选择器直接决定了样式的生效范围和代码的可维护性。掌握以下 5 个基础选择器，可构建覆盖 90%场景的高效样式体系：
元素选择器：快速定义全局基础样式 类选择器：创建可复用的样式模块 ID 选择器：精确定位唯一元素 通用选择器：全局样式初始化 伪类选择器：实现动态交互效果
第一章 元素选择器：构建样式的基石
基础语法与应用场景
/* 基础语法 */
元素名 {
属性: 值;
}
/* 实战示例：统一段落样式 */
p {
font-size: 16px;
line-height: 1.6;
color: #333;
}
典型场景：
统一基础排版（全局字体/字号设定） 重置浏览器默认样式（如 body边距清零）
? 技巧：低特异性（权重 0,0,1）使其易于被覆盖，适合作为基础样式层。
第二章 类选择器：灵活复用的样式模块
组件化开发利器
/* 基础语法 */
.类名 {
属性: 值;
}
/* 可复用按钮组件 */
.btn {
padding: 12px24px;
border-radius: 4px;
transition: all 0.3s;
}
.primary {
background: #2196f3;
color: white;
}
最佳实践：
<button class="btn primary">主要按钮</button> <a href="#" class="btn">链接按钮</a>
⚠️ 避免陷阱：单个类名不应超过 3 个样式属性，防止出现"全能类"导致维护困难。
第三章 ID 选择器：精准定位的强效工具
唯一性原则
#header {
height: 80px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
| 适用场景 | 限制 |
|---|---|
? 慎用警告：滥用 ID 选择器会导致样式难以维护，如必须使用建议配合
!important规避覆盖问题。
第四章 通用选择器：全局样式的重置与一致性
全局初始化示例
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
性能优化建议：
避免直接使用 *设置复杂属性（如transform）推荐配合重置库（如 normalize.css）使用 作用域限定（如 div *优于全局*）
第五章 伪类选择器：动态交互与上下文反应
常用伪类类型
进阶示例：
/* 表格斑马纹效果 */
tr:nth-child(odd) {
background: #f5f5f5;
}
/* 输入框聚焦效果 */
input:focus {
border-color: #2196f3;
box-shadow: 008pxrgba(33, 150, 243, 0.3);
}
关键比较与最佳实践
选择器权重层级
#header | ||
.btn:hover | ||
div |
样式架构原则：
优先使用类选择器构建组件 限制 ID 选择器使用范围 使用 BEM 命名规范（如 .block__element--modifier）
结语
推荐工具：
MDN CSS 选择器文档 Specificity Calculator
行动指南：
在现有项目中重构 3 个选择器 使用 Chrome DevTools 审查选择器性能 尝试实现组合选择器（如 input[type="text"]）
「记住：优秀的选择器策略=70%类选择器+20%伪类+10%其他。现在就开始优化你的 CSS 选择器吧」
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
