html - 关于css选择器问题

问题描述

问 题

具体问题:
1.写css的时候，css组合选择器有4层，甚至5层，这样做有什么坏处？
2.写css的时候，.select1 > .select 2 {}和 .select1 .select2 {} 哪种比较好？
2.1 因为我要减少遍历的层数，所以我用了 .select1 > .select2这样的选择器层数比较多(.select1 > .select2 > .select3 > .select4)，但是会定死，所以我想问，这样做是否可取或者有什么改善方法？
(前者只遍历一层，后者就不断遍历，直到最后一个子元素)
3.上面那样稍微改动页面会乱(试过修改选择器和页面)
4.看到一些答案说 选择器太长会影响性能，具体是哪方面的性能，有多大影响(卡几秒？)
还是页面太简单，不足以影响性能？...了解过 样式要放在head中以及不要使用@import 引入样式。
线上地址: http://js.jirengu.com/fuxohuyehe
(线上地址有什么不足之处)

写页面的时候纠结：1.css选择器不要太长 2.不要写太死(主要问题)

解决方案

1，选择器是从右往左开始查找的，每增加一个层级，就增加了查找的时间，而我们前端的很多操作都是基于选择器的，选择器耗时越多整体性能就差啦。
2，.select1 > .select2 优于 .select1 .select2。但是更好的是 .sel1-sel2。当然只是单纯的考虑性能，一般我们在选择选择器的时候更多的是考虑可读性可维护性，以及良好的 html 结构，减少不必要的标签可以帮助减少层级。
3，一般我们可以按照一定的规则写好类名，适当增加类的长度，减少层级。还有比如可以讲一些工具类的 css 样式写成公共类，比如按钮，列表，表格等，没有必要一定按照层级的位置写选择器。

可以参考下面的文章，讲的很好，可以给你提供一点思路：
Writing_efficient_CSS
css-methodologies

这篇关于html - 关于css选择器问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！