a{...}和 .box a{...}的渲染性能高低
a{...}和 .box a{...}的渲染性能高低
.box a {
...
}
a{
...
}
因为对于CSS浏览器的渲染机制是选择器从右向左查询
.box a {...} 的渲染逻辑是:先找所有 a标签,再找 .box下的所有 a标签
.a{...}的渲染逻辑是:直接找到所有a标签
所以 .box a {...} 比 a {...} 多了一次查找,性能也不如其高
.box a {
...
}
a{
...
}
因为对于CSS浏览器的渲染机制是选择器从右向左查询
.box a {...} 的渲染逻辑是:先找所有 a标签,再找 .box下的所有 a标签
.a{...}的渲染逻辑是:直接找到所有a标签
所以 .box a {...} 比 a {...} 多了一次查找,性能也不如其高