CSS选择器策略：（使用父类前缀：.widget.widget项{}）或（直接：.widget项{}）

这是一个非常普遍的情况。假设我们有一些标记：

<div class="widget">
    <div class="widget-item"></div>
</div>

选项2：直接访问该类

.widget .widget-item { /* styles */ }

.widget-item { /* styles */ }

---

前缀是否有显著的性能优势/命中率

如果我不需要在另一个容器中重用该类，比如说

.other.widget item

，那么前缀有什么真正的好处吗？（大多数时候，我甚至不需要在父类之外重用该类，所以在功能上没有区别？）

我发现自己在使用这些深层选择器，而我可能不应该这样做

这家伙说你应该深窝：

这家伙说你应该让他们简单，不受重视：

---

如果这是重复的，请原谅，我似乎找不到。

创建嵌套选择器与简单选择器的决定实际上应该基于您需要覆盖特定规则的可能性

特异性和外观顺序驱动风格如何相互级联。虽然存在性能方面的影响，但我不会过分关注最常见的场景

当您使用像

.widget.widget item

这样的选择器时，它将比像

.widget item

这样的选择器具有更高的特异性。因此，如果您在某些地方使用

.widget项

，您可能希望覆盖某些默认样式，那么您可能会添加类似于

.widget.widget项

的内容，以替代它。类似地，您可能会做一些特定性稍低的事情，如

div.widget-item

，这将覆盖与

.widget-item

完全匹配的潜在规则

基本上，这就是您真正应该如何处理规则冲突，而不必求助于放置

的常见错误！重要信息

到处都是，这会导致冲突的重要规则，您无法再控制这些规则，因为它们要么具有相同的特殊性，要么不足以满足您想要匹配的规则

这是一篇关于这个问题的文章

看看这个。我尽量避免深度链接，因为这会让你的风格变得脆弱。从维护的角度来看，简单的

.widget

类选择器更容易在将来修复和更改

---

就性能而言，我认为@是正确的。较短的选择器链对浏览器来说工作量较小。

CSS从右向左移动。我认为第二个解决方案更快（因为它不需要检查父母），实际上，这两个解决方案都不够快，无法产生丝毫的不同。注意：这个问题不仅仅是性能问题。。。不要结束我的问题！我得到的两个答案太棒了，我还在阅读链接的文章。