前端 - css使用通配符*效率低？

问题描述

问 题

看过一篇文章说，说用css使用通配符*效率低，但我平时挺喜欢用，也没感觉什么差异，请高手指点？

<div class="te">
     <p>第一个p</p>
     <span>第二个span</span>
     ...
<div>

.te *{
   padding:5px;
}

or

.te p{
   padding:5px;
}
.te span{
   padding:5px;
}

解决方案

css匹配的顺序不是从左向右，而是从右向左。

比如说.a .b这样的选择器，浏览器首先找到所有的class为b的元素，然后再找被a包围的b元素。

所以如果写成.te *的话，首先浏览器会把所有元素都找出来，然后再找上层为te的元素，这样的效率一定是极低的，所以不建议这么用。

这篇关于前端 - css使用通配符*效率低？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！