我在过去1.5小时内一直在阅读这篇文章，但仍然找不到简明扼要的决定性答案。
据我所知，浏览器从右到左解析CSS选择器。
这意味着一个很长的CSS选择器，例如：
.card .container .businesscard .pinfo li.pinfo-box span:first-child
是在SO中出现的效率最低的代码行之一。
首先，我是对的吗？
其次，我正在使用LESS设计一个丰富的UI，它最终会从我编码的嵌套设计中产生这种庞大的选择器。
可以做些什么来避免这种选择器？仅依靠课程和ID？但是，如果你不能编写嵌套的CSS，那么再次使用LESS的目的是什么？
感谢您的意见。
答案 0 :(得分：3)
这是正确的。浏览器从右到左评估选择器。它会尝试在span内找到li.pinfo-box，依此类推。
写LESS时要遵循的一条经验法则是：不要超过3-4级。
这会阻止您的选择器变大，而您仍然可以从LESS中的嵌套功能中受益。
“无用”嵌套的一个很好的例子是样式列表。有时我会像这样编写选择器：
#wrapper .blog-post ul，#wrapper .blog-post ul li
是否真的有必要指定li 必须位于ul内？写作可能就够了：
#wrapper .blog-post li
所有这一切都很有用。但是：在尝试优化网站性能时，这不是第一件事。花一些时间来减少请求数量或其他内容。
答案 1 :(得分：3)
除非你有非常不寻常的内容，否则选择器解析和匹配不太可能是一个重要因素。我建议使用任何可维护的工作并完成工作，直到测试显示性能问题为止。然后我会找到一个分析器（在OSX上我会使用Instruments，但是对于大多数平台应该有一个不错的可用）并将它附加到浏览器;如果选择器匹配在配置文件中显示为高，那么请考虑用更快的选择器替换慢速选择器（id选择器绝对是一个不错的选择）。