css里面多层class选择好不好？

Posted 2023-03-21

问题1：多个比如.class1 .class2 .class3 会不会比直接.class3效率低的多（class多选择越精确，效率会不会越低？，哪种可取一点？）？
问题2：比如.class1 ul li p （class1表示一个div）这样子，要不要给想要选择的p加一个类名，然后 .class1 .class2选择来的好一些？
问题3：是不是一般写css用class，而js效果用id？
问题4：css什么时候该加class,比如问题2里的例子？

问题多，求大神解答？

的确如此，因为浏览器解析CSS选择器是从右向左的，形如.class1 .class2 .class3 /* 样式 */ 这样的选择器（后代选择器），浏览器会先将页面中所有含class3这个类名的标签渲染一遍，然后再读取.class2，将.class2下包含.class3类名的标签渲染一遍，最后再将.class1下.class2下包含.class3类名的标签渲染一遍。这样一来浏览器渲染了三次，性能肯定比直接.class3效率低（由于渲染是毫秒级别就完成的，所以肉眼无法察觉），无疑直接单类名的效率更佳，但如果用单类名的话对类名命名的要求较高（要避免样式类名重复），而且会增加CSS文件的代码量，所以具体用单类名还是后代选择器要根据实际情况去定，如果用了后代选择器，推荐最好不要超过2层。

和第1个问题原理相同，你的后一种写法更好。

对，一般是这样的。无论是js还是css，id选择器的效率是最高的，但id选择器在页面中不能重复，这一点会影响到css代码的重用度，所以写css采用class类名的方法要更好。

加不加class要从性能和维护两个方面去考虑，例如 .class1 ul li p 和 .head .photo-title 这样的类名，前者的效率比后者低，且时间一久，你根本不知道这里这个p是干嘛的了。

追问

现在是不是只要不是很乱搞，css的效率就不会有大问题？

追答

得益于计算机技术的飞速发展，现在的浏览器处理能力越来越强，用发展的眼光看，有关css选择器效率方面的担忧会越来越少。例如HTML5搭配的CSS3标准里扩展了大量的属性选择器（简直可以和jQuery有得一拼了），这在CSS2标准流行的时代写这种属性选择器肯定是会被高手鄙视的，因为属性选择器是CSS选择器里效率非常低的一种；用客观的眼光看，css不同选择器有着不同效率是客观存在的，作为一名（或立志）从事Web前端的人员，追求页面的渲染速度、提升网站性能是基本的岗位职责。

参考技术A 问题1：可以直接写最近的类名就可以了
问题2：如果这人个P是独立样式，建议加一个会好些
问题3：这个根据实际需求了，ID为唯一性，可以统一样式，class对各各样式
问题4：需要用到样式的时候，就需要用到class