css选择器的性能直接影响浏览器渲染页面的效率，当选择器设计不合理时，浏览器需要消耗更多时间计算元素匹配的样式，进而引发页面卡顿问题。通配选择器和过长的匹配路径是常见的影响性能的因素，优化这两部分能显著提升样式计算速度。
css选择器的匹配规则
浏览器解析css选择器时采用的是从右到左的匹配方式，也就是先找到最右侧的选择器条件对应的元素，再向上逐级匹配父级条件。比如选择器div.container > ul li a，浏览器会先找到所有a元素，再判断其父元素是不是li，再向上判断是不是ul的子元素，最后判断是不是div.container的后代，匹配路径越长，计算量就越大。
通配选择器对性能的影响
通配选择器*会匹配页面上的所有元素，当通配选择器和其他选择器组合使用时，会大幅增加匹配的计算量。比如下面的样式代码：
/* 不推荐的通配选择器用法 */
* {
margin: 0;
padding: 0;
}
.container * {
font-size: 14px;
}
第一段代码会让浏览器为页面所有元素都计算一次margin和padding样式，第二段代码会先匹配所有元素，再筛选出.container的后代，当页面元素数量较多时，这种计算会非常耗时。如果确实需要重置默认样式，可以指定具体的元素类型，而不是使用通配选择器：
/* 优化后的重置样式 */
body, h1, h2, h3, p, ul, li {
margin: 0;
padding: 0;
}
优化选择器匹配路径的方法
1. 减少选择器的层级
尽量避免使用过长的后代选择器，层级越多，从右到左匹配的步骤就越多。比如下面的选择器可以简化：
/* 优化前 */
div#header .nav ul li a {
color: #333;
}
/* 优化后 */
.nav-link {
color: #333;
}
直接给目标元素添加类名，用类选择器匹配，比多层后代选择器的性能高很多。
2. 优先使用高效的选择器类型
不同选择器的性能从高到低大致为：id选择器 > 类选择器 > 标签选择器 > 通配选择器。尽量用id或类选择器作为选择器的最右侧条件，减少匹配范围。比如下面的写法更推荐：
/* 推荐写法 */
#submit-btn {
background-color: #1890ff;
}
/* 不推荐写法 */
button[type="submit"] {
background-color: #1890ff;
}
3. 避免用标签选择器修饰id选择器
id选择器本身已经是唯一匹配，前面加标签选择器属于冗余写法，还会增加匹配步骤：
/* 冗余写法 */
div#content {
width: 1200px;
}
/* 优化后 */
#content {
width: 1200px;
}
4. 减少选择器的组合复杂度
尽量避免多个复杂选择器组合，比如同时用属性选择器、伪类选择器和后代选择器组合，会增加浏览器的计算负担。如果必须使用复杂条件，可以把样式直接绑定到目标元素的类上。
性能验证方法
可以通过浏览器的开发者工具验证选择器优化的效果，打开Chrome的Performance面板，录制页面加载过程，查看Recalculate Style的耗时，对比优化前后的耗时变化，就能直观看到选择器优化带来的性能提升。
| 优化项 | 优化前耗时 | 优化后耗时 |
|---|---|---|
| 移除通配选择器重置样式 | 12ms | 3ms |
| 简化3层后代选择器为类选择器 | 8ms | 1ms |
实际开发中，不需要过度追求选择器的极致性能，只要避免明显的性能陷阱，比如滥用通配选择器、设计过长的匹配路径，就能让页面的样式计算效率保持在合理范围，避免卡顿问题。