Html 在一个ID中是否需要有一个ID的CSS选择器？

为了演示的目的，我将使用StackOverflow元素来提高可信度

如果您退出SO，您可以在页面顶部看到一个大的调用操作框。更简单的是，只需点击这里的新葡萄牙语版本-

一旦看到“调用操作”框（捕获于下面），请继续使用开发人员工具进行检查

在ID为

hero content

的div上，您会注意到我粘贴的一种样式：

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

---

我做了一些研究，大家都知道，div ID应该是页面上唯一的。尽管如此，如果它们是唯一的，为什么选择器需要在ID中声明ID？

可能只是为了增加该选择器的特殊性

例如，作者可能想要覆盖

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

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

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

---

有几个原因

样式表可以在HTML文档之间重用。您可能希望区分

#hero content

是

#herobox

一页的后代的

#hero content

，以及另一页上的

#somethingelse

的后代

---

在这种情况下，更可能的是特异性。例如，假设

#hero content

是

，设置

#herobox div

样式的一般规则比

#herobox#hero content

更具体。添加一个额外的id选择器将增加特殊性。

Ahhh对，因此它基本上被用来覆盖

#hero content

元素上已经存在的样式。以前从未少用过，尽管它变得非常流行，毫无疑问，像StackOverflow这样的大型网站会使用更少或更少的SASS来提高可用性。谢谢你的意见。