过去 1.5 小时我一直在阅读这方面的内容，但仍然找不到简洁且果断的答案。
据我所知，浏览器从右到左解析 CSS 选择器。
这意味着像这样的长 CSS 选择器:
.card .container .businesscard .pinfo li.pinfo-box span:first-child
是 SO 中出现过的效率最低的代码行之一。
首先，我对这一点是否正确？
其次，我正在使用 LESS 设计一个丰富的 UI，它最终会从我正在编码的嵌套设计中生成这种庞大的选择器。
如何避免这种选择器？单靠类和ID？但是话又说回来，如果你不能编写嵌套的 CSS，那么使用 LESS 的目的是什么？
感谢您的意见。
最佳答案
没错。浏览器从右到左评估选择器。它会尝试在 li.pinfo-box 中找到一个 span 等等。
编写 LESS 时要遵循的一个经验法则是:嵌套不要超过 3-4 层。
这将防止您的选择器变大，同时您仍然可以从 LESS 的嵌套功能中受益。
“无用”嵌套的一个很好的例子是样式列表。有时我会这样写选择器:
#wrapper .blog-post ul, #wrapper .blog-post ul
是否真的有必要指定 li 必须 在 ul 内？写起来可能就足够了:
#wrapper .blog-post li
所有这些都值得了解。但是:在尝试优化您的网站性能时，这并不是首先要深入研究的事情。花一些时间降低请求数量或采取其他措施。
关于css - 嵌套选择器的性能影响和 LESS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13829959/