0

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

#section #content h1
{
   margin:0;
}

当他们可以这样做时：

#content h1
{
   margin:0;
}

对于这样的代码：

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

    </div>
</div>

并获得相同的结果（不幸的是，至少在 IE7 - 我的目标浏览器中）。只是为了代码的特异性吗？代码清晰性以声明您所指的内容？

4

6 回答 6

2

如果您（或其他任何人）正在这样做，那么您不应该这样做。您只是试图将一个开发不佳的 CSS 结构整合在一起。

尽量遵守这条规则：ID 用于 JavaScript，类用于 CSS。

于 2013-07-18T19:42:29.653 回答
2

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

于 2013-07-18T19:21:59.730 回答
1

您永远不需要在选择器中使用多个 ID，因为 ID 在文档中必须是全局唯一的。这意味着你#section #content h1是矫枉过正，因为它包含 2 个 ID。

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

于 2013-07-18T19:23:26.270 回答
0

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

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

例如：

#content h1 { /* style 1 */ }

#about #content h1,
#contact-us #content h1,
.products #content h1 { /* style 2 */ }
于 2013-07-18T19:38:59.247 回答
0

您正在寻找的术语是“特异性”最好的例子，我见过描述这一点的是使用基于点的系统。

于 2013-07-18T19:43:17.083 回答
-1

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

例如，以您的用例为例，我们必须将其从部分和内容 div 扩展到稍大一些。

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

现在，无需添加额外的特殊性，您将在页面的每个内容部分中获取所有 H1 标签，但您可能不想这样做。

在小文件中不具体不是问题，但是当您开始接触数百种可能的 css 交互时，非常具体地说明您在 css 中所做的事情可以为您省去很多麻烦。

于 2013-07-18T19:29:09.893 回答