CSS选择器应该有多少嵌套？

考虑一个可在页面上多次使用的可重用组件/小部件。它有如下HTML：

<div class='component-banner'>
    <div class='component-heading'>
        <p>My Widget</p>
    </div>
    <div class='component-body'>
        <p>Blah blah</p>
    </div>
</div>

或者说：

---

那么，CSS应该如何编写呢？我想知道的主要是可读性和可维护性，但可能还有其他我没有想到的因素。

这是一个好问题。由于.component browser是可重用组件的基础，我认为这足以确保规则只适用于该组件。

这实际上取决于您的规范和要求，例如，您正在编写的web应用程序是否意味着长期可维护，模块化，因此易于与构成整体框架的其他组件集成。在这种情况下，我的建议是采用名称空间的概念，为您自己的模块提供所有与CSS、JS相关的代码，并且不与将来的任何代码或用户代码冲突。

如果您有两个（或多个）冲突的CSS规则指向同一个元素，那么浏览器会遵循这些规则来确定哪一个是最具体的，从而获胜

团体的实际人数 使用嵌套选择器需要一些时间 精明的。基本上，你给每一个 id选择器（“#随便什么”）的值 100，每个类选择器 （“.whatever”）值为10且每 HTML选择器（“任意”）的值 1.然后你把它们加起来，你就有了特异性值

因此：

.component banner.component标题p

将变为绿色，无论顺序如何

 #test p {color:orange}
 body div p { color:green }
 div p { color:red }
 p { color:blue }

---

无论顺序如何，

#test p

都会变成橙色。

关于特异性的答案是正确的。这种故意缺乏特定性是一种称为面向对象CSS（oocss）的方法的一部分，这种方法鼓励使用类选择器而不是ID选择器，并以更模块化的方式构建，在同一HTML元素上大量使用多个类，并重用类。还鼓励尽量减少使用！重要信息（它打破了级联并降低了可维护性）和保留冗余HTML元素（在某种程度上，您已经在这样做了，即使用.component标题而不是div.component-heading）

 #test p {color:orange}
 body div p { color:green }
 div p { color:red }
 p { color:blue }

尽可能地遵循这种方法可以通过降低对具有多个ID或类的真正长选择器的需求来极大地简化CSS

---

您是否考虑过选择器的渲染时间？ID是最有效的，*是最不有效的

---

这可能是，正如你所说，“其他因素[你]没有考虑到”

你需要的那么多，但没有更多。从SO CSS文件：

。编辑建议。选项a.操作。完全差异，
，
#同义词表td.dim.项目乘数
。。。但是，大多数选择器都有一个或两个级别。Facebook，5个级别：
.uiSideNav.selectedItem.subitem:hover.uiSideNavCountSprited span.countValue
。。。那篇文章很有趣，我知道这一点。但是CSS应该如何编写呢？更具体还是更少？
.component-banner .component-heading p { color:green }
.component-heading p { color:red }
 p { color:blue }

 #test p {color:orange}
 body div p { color:green }
 div p { color:red }
 p { color:blue }