8

在过去的 1.5 小时里，我一直在阅读这方面的内容，但仍然找不到简明而果断的答案。

据我了解，浏览器从右到左解析 CSS 选择器。

这意味着一个长的 CSS 选择器，例如：

.card .container .businesscard .pinfo li.pinfo-box span:first-child

是 SO 中出现过的效率最低的代码行之一。

首先，我对这个正确吗？

其次，我正在使用 LESS 设计一个丰富的 UI，它最终会从我正在编码的嵌套设计中产生这种庞大的选择器。

可以做些什么来避免这种选择器？仅依靠类和 ID？但是，如果您不能编写嵌套 CSS，那么使用 LESS 的目的又是什么？

感谢您的意见。

4

2 回答 2

6

那是对的。浏览器从右到左评估选择器。它将尝试找到一个span内部的 ali.pinfo-box等等。

编写 LESS 时要遵循的一条经验法则是：不要嵌套超过 3-4 层。

这将防止您的选择器变大，而您仍然可以从 LESS 中的嵌套功能中受益。

“无用”嵌套的一个很好的例子是样式列表。有时我会这样写选择器：

#wrapper .blog-post ul,#wrapper .blog-post ul li

真的有必要指定li 必须在 a 内ul吗？写起来可能就够了：

#wrapper .blog-post li

所有这一切都很高兴知道。但是：在尝试优化您的网站性能时，这并不是要深入研究的第一件事。花一些时间减少请求的数量或其他东西。

于 2012-12-11T23:11:31.040 回答
3

除非您有非常不寻常的内容，否则选择器解析和匹配不太可能是一个重要因素。我建议使用任何可维护的东西并完成工作，直到测试显示性能问题为止。然后我会拿出一个分析器（在 OSX 上我会使用 Instruments，但应该有一个适用于大多数平台的不错的）并将它附加到浏览器；如果选择器匹配在配置文件中显示很高，那么考虑用更快的选择器替换慢速选择器（id 选择器绝对是一个不错的选择）。

于 2012-12-11T23:12:57.787 回答