人們為什么在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卻很復雜。

Answer 2

如果您（或其他人）正在這樣做，則不應該這樣做。 您只是試圖將一個開發不良的CSS結構整合在一起。

盡最大努力遵守該規則：ID用於JavaScript，類用於CSS。

Answer 3

選擇器中永遠不需要多個ID，因為ID在文檔中必須是全局唯一的。 這意味着您的#section #content h1由於包含2個ID而#section #content h1 。

其他類型的選擇器（類，標記名等）不是唯一的，因此您可能需要將一些選擇器串在一起才能獲得所需的元素。 例如，在許多情況下， #section .content p都是完全合理的。

Answer 4

您可能不希望所有的#content h1看起來都一樣。

在這種情況下，＃ #content h1可能具有您想要鎖定的祖先ID /類，因此您可以為這些實例更改h1的樣式。

例如：

#content h1 { /* style 1 */ }

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

Answer 5

您正在尋找的術語是“ Specificity”（ 最佳）示例示例 ，該示例可以用來描述基於點的系統。

Answer 6

您使用多個選擇器，以便不選擇不需要的部分。

例如，以您的用例，我們必須將其從section和content div擴展到稍大的對象。

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

現在，無需添加額外的特殊性，您就可以在頁面的每個內容部分中獲取所有H1標簽，但是您可能不想這樣做。

在小文件中非特定性不是問題，但是當您開始接觸數百種可能的css交互時，非常明確地了解您在css中的操作可以節省很多麻煩。