CSS 选择器优化
CSS 选择器从右向左匹配，理解这一机制是优化的关键。
匹配原理
浏览器解析选择器时从右向左查找：
CSS
/* 先找所有 a，再过滤父级为 .nav 的，效率较低 */
.nav a { color: blue; }
/* 直接匹配，效率高 */
.nav-link { color: blue; }
优化策略
避免深层嵌套
CSS
/* 差：层级过深 */
body .container .content .sidebar .widget p { }
/* 好：扁平化 */
.widget-text { }
减少通配符使用
CSS
/* 差：匹配所有元素 */
* { box-sizing: border-box; }
/* 好：明确指定 */
html, body, div, span, p { box-sizing: border-box; }
使用类选择器代替标签选择器
CSS
/* 差：标签选择器效率低 */
div span a { }
/* 好：类选择器直接定位 */
.link-text { }
避免属性选择器复杂匹配
CSS
/* 差：正则匹配效率低 */
[class^="nav-"] { }
/* 好：明确类名 */
.nav-item { }
性能对比
| 选择器类型 | 匹配效率 | 推荐程度 |
|---|---|---|
| ID 选择器 | 最高 | ★★★★★ |
| 类选择器 | 高 | ★★★★☆ |
| 标签选择器 | 中 | ★★★☆☆ |
| 属性选择器 | 较低 | ★★☆☆☆ |
| 通配符选择器 | 最低 | ★☆☆☆☆ |
选择器层级控制在 3 层以内最佳。
要点总结
- 选择器从右向左匹配，右边越具体效率越高
- 避免深层嵌套，建议不超过 3 层
- 优先使用类选择器，减少标签和通配符
- 属性选择器避免复杂正则匹配
📝 发现内容有误？点击此处直接编辑