Css 使用特定选择器是否更有效？

我使用的样式表具有如下模式：

.the-widget { foo: bar; }
.the-widget .some-thing { foo: bar; }
.the-widget .some-thing .some-other-thing { foo: bar; }

这可以使跟踪样式变得更容易，但它似乎不能很好地扩展。我宁愿只做：

.the-widget .some-other-thing { foo: bar }

---

去掉中间人。我知道对于如何构建样式表有很多不同的意见，所以我想问一下使用详细的选择器是否有客观优势。

您发布的三个示例之间的性能差异可以忽略不计。（目光犀利的谷歌搜索可能会证实我的说法……）

---

最后一个例子非常好。一般来说，在CSS中尽可能少的特殊性是好的，否则你很快就会在代码中乱扔

！重要的

语句或花费数小时在代码中的某个地方寻找覆盖规则。

您发布的三个示例之间的性能差异可以忽略不计。（目光犀利的谷歌搜索可能会证实我的说法……）

---

最后一个例子非常好。一般来说，在CSS中尽可能少的特殊性是好的，否则你很快就会在代码中乱扔

！重要的

语句或花费数小时在代码中的某个地方查找某些覆盖规则。

这取决于您是否希望在整个应用程序中共享“子样式”。如果您没有预见到您的特殊情况需要您删除中间人的愿望是明智的，那么强烈地定义选择器将减少潜在的命名错误。这确实是一个偏好的问题。有些人坚持少一点是最好的方法。再次检查您的应用程序，并选择符合您需要的最佳路线。

这取决于您是否希望在整个应用程序中共享“子样式”。如果您没有预见到您的特殊情况需要您删除中间人的愿望是明智的，那么强烈地定义选择器将减少潜在的命名错误。这确实是一个偏好的问题。有些人坚持少一点是最好的方法。再次检查您的申请，并选择符合您需求的最佳途径。

您提供了很好的解释。同样值得一提的是，您应该使用更具体的操作符，而不是使用普通的嵌套。当然，当你有办法用它们来编写代码时。小部件。其他一些东西{foo:bar}的渲染速度比。小部件>。其他一些东西{foo:bar}

。小部件>。其他一些东西

更快，因为搜索

的父对象（
。小部件
）。其他一些东西

将在第一个父对象处停止（无论是否匹配）无需在

html

根上遍历整个DOM树。但是，除非您使用一个巨大的DOM树对页面进行编码，否则在使用

parent>child

选择器时，没有人能够察觉到任何性能差异。您提供了很好的解释。同样值得一提的是，您应该使用更具体的操作符，而不是使用普通的嵌套。当然，当你有办法用它们来编写代码时。小部件。其他一些东西{foo:bar}的渲染速度比。小部件>。其他一些东西{foo:bar}

。小部件>。其他一些东西

更快，因为搜索

的父对象（
。小部件
）。其他一些东西

将在第一个父对象处停止（无论是否匹配）无需在

html

根上遍历整个DOM树。但是，除非您使用巨大的DOM树对页面进行编码，否则在使用

parent>child

选择器时，任何人都无法察觉任何性能差异。