关于css选择器问题

Question

具体问题:
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.不要写太死(主要问题)

Answer 1

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

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

Answer 2

自己的习惯。将页面划分功能区，然后一个区域内的div统一用父辈类名开头，之后的有些不冲突的、可能会需要变动的层级可以省略。
然后将反复使用到的css提取出来，特殊的单独写。像是几个模块一样，颜色不一样，颜色单独定义。
这样需要复用的时候直接复制div结构安上类名就行。

Answer 3

1.层级过多对执行效率是有影响的；
2.不存在哪种好，取决于你要影响的是直接子元素，还是所有子元素；
3.确定是唯一，写死没问题，确定？！！

补充：
css style
这个可以看看。