是否有必要在ID中使用ID的CSS选择器？

Question

出于本演示的目的，我将使用StackOverflow元素来提高可信度。

如果您退出SO，则可以在页面顶部看到一个大型号召性用语框。更简单，只需在这里转到他们的新葡萄牙语版本 - https://pt.stackoverflow.com/

一旦看到行动呼吁框（如下所示），请继续使用开发人员工具进行检查。

在ID为hero-content的div上，您会注意到我粘贴在下面的样式：

#herobox #hero-content {
   background: #fff7d8;
   border: none;
}

我做了一些研究，众所周知，div ID的 应该是页面的唯一性。虽然，如果它们是唯一的，为什么选择器需要在ID中声明ID？

Answer 1

有几个原因。

样式表可以在HTML文档之间重用。您可能希望区分#hero-content一页#herobox的后代和另一页#somethingelse的后代。

在这种情况下，更有可能是特异性。例如，假设#hero-content是<div>，设置#herobox div样式的一般规则将更具体#herobox #hero-content。添加额外的id选择器会增加特异性。

Answer 2

可能只是增加选择器的特异性。

例如，作者可能想要覆盖......

#hero-content { border: 2px solid #333; }

它也可能是像LESS这样的工具的副作用，作者可能最初写过......

#herobox {
    // Lots of other CSS.
    #hero-content {
        // ... 
    }
    // Lots of other CSS.
}