在过去的 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
真的有必要指定li必须在ul内吗？写起来可能就足够了：
#wrapper .blog-post li
所有这些都很高兴知道。但是：这不是尝试优化网站性能时要深入研究的第一件事。花一些时间减少请求的数量或其他内容。
选择器解析和匹配不太可能是一个重要因素，除非你有非常不寻常的内容。我建议使用任何可维护的东西并完成工作，直到测试显示性能问题为止。然后我会拿出一个分析器（在 OSX 上我会使用 Instruments，但应该有一个不错的分析器可用于大多数平台）并将其附加到浏览器;如果选择器匹配显示在配置文件的顶部，那么请考虑用更快的选择器替换慢速选择器（ID 选择器绝对是一个不错的选择）。