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往往很复杂。

Answer 2

如果你（或其他任何人）正在这样做，你不应该这样做。你只是想把一个开发不好的CSS结构放在一起。

尽最大努力坚持这条规则：ID适用于JavaScript，类适用于CSS。

Answer 3

您永远不应该在选择器中需要多个ID，因为ID必须在文档中是全局唯一的。这意味着您的#section #content h1过度杀伤，因为它包含2个ID。

其他类型的选择器（类，标记名称等）不是唯一的，因此您可能需要将几个字符串串在一起以获取所需的元素。例如，#section .content p在许多情况下都是完全合理的。

Answer 4

您可能不希望所有#content h1看起来都一样。

在这种情况下，#content h1可能有一个您想要锁定的祖先ID / Class，因此您可以更改这些实例的h1样式。

例如：

#content h1 { /* style 1 */ }

#about #content h1,
#contact-us #content h1,
.products #content h1 { /* style 2 */ }

Answer 5

您正在寻找的术语是“特异性”best example我曾经说过这是使用基于点的系统。

Answer 6

您使用多个选择器，这样就不会选择您不想要的部分。

例如，考虑到您的用例，我们必须将它从一个部分和内容div扩展到稍微大一些。

<div class="wrapper">
    <div class="header">
        <div class="content">
        </div>
    </div>
    <div class="section>
        <div class="content">
        </div>
    </div>
</div>

现在，在不添加额外特异性的情况下，您将获取页面每个内容部分中的所有H1标记，但您可能不希望这样做。

在小文件中非特异性并不是一个问题，但是当你开始进入数百种可能的css交互时，非常具体地说明你在css中所做的事情可以为你节省大量的麻烦。

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

6 个答案: