引言：为什么选择器是 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 选择器吧」
優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實的服務(wù)了近萬家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用（手機(jī)站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號：
專屬顧問
