html - 为什么人们在 CSS 中使用多个 ID 选择器？

Question

为什么人们在 CSS 中这样做:

#section #content h1
{
   margin:0;
}

他们什么时候可以做:

#content h1
{
   margin:0;
}

对于这样的代码:

<div id="section">
    <div id="content">

    </div>
</div>

并获得相同的结果(至少在 IE7 中——不幸的是我的目标浏览器)。仅仅是为了代码的特殊性吗？代码清晰度来声明你指的是什么？

Answer 1

CSS 文件通常设计为可重用，以便可以在整个网站上使用相同的 CSS，并可以将其应用于应用程序中的所有页面。

以非常具体的节点为目标有助于防止任何意外行为。

假设你有你所说的这段代码，

#content h1
{
   margin:0;
}


<div id="section">
    <div id="content">

    </div>
</div>

有人在你之后使用相同的 CSS 创建了另一个 HTML 页面，结构是这样的

<div id="content">

</div>

并且您希望此页面上的 H1 具有不同的样式。

即使有了这个 CSS，你也可以争辩说

#section #content h1
{
   margin:0;
}

如果新页面由相同的结构组成，

<div id="section">
    <div id="content">

    </div>
</div>

在那种情况下调试起来更容易，在这个例子中结构非常简单，但现实生活中的 CSS 往往很复杂。