CSS類選擇器和ID選擇器

ID用於標識頁面上的特定元素（比如站點導航），而且必須是唯一的。

ID也可以用來標識持久的結構性元素，例如主導航或內容區域。

ID還可以用來標識一次性元素，例如某個鏈接或表單元素。

一個ID只能應用於頁面上的一個元素。

同一個類名可以應用於頁面上任意多個元素，因此類的功能強大的多。類非常適合表示內容的類型或其他相似的條目。例如有一個新聞頁面，其中包含多篇新聞，代碼如下所示

    <div id="story-id-1">
        <h2>ID</h2>
        <p>ID用於標識頁面上的特定元素（比如站點導航），而且必須是唯一的。 ID也可以用來標識持久的結構性元素，例如主導航或內容區域。 ID還可以用來標識一次性元素，例如某個鏈接或表單元素。 一個ID只能應用於頁面上的一個元素。
        </p>
    </div>
    <div id="story-id-2">
        <h2>類</h2>
        <p>同一個類名可以應用於頁面上任意多個元素，因此類的功能強大的多。類非常適合表示內容的類型或其他相似的條目。
        </p>
    </div>

不必給每篇新聞分配不同的ID，可以給所有新聞分配一個類名news.

    <div class="news">
        <h2>ID</h2>
        <p>ID用於標識頁面上的特定元素（比如站點導航），而且必須是唯一的。 ID也可以用來標識持久的結構性元素，例如主導航或內容區域。 ID還可以用來標識一次性元素，例如某個鏈接或表單元素。 一個ID只能應用於頁面上的一個元素。
        </p>
    </div>
    <div class="news">
        <h2>類</h2>
        <p>同一個類名可以應用於頁面上任意多個元素，因此類的功能強大的多。類非常適合表示內容的類型或其他相似的條目。
        </p>
    </div>

在分配ID和類名時，一定要盡可能保持名稱與表現方式無關。例如，如果希望所有表單通知消息顯示為紅色，可以給他們分配類名red。只要頁面上沒有其他紅色的元素，這就沒問題。但是，如果還希望讓4個必需的表單標簽也顯示為紅色，就必須猜測這個類引用的是哪種元素，這時情況就有些混亂了。想象一下，如果在整個網站上到處使用表現性元素，代碼會多么混亂。如果決定把表單通知由紅色改為黃色，就更復雜了。在這種情況下，必須修改所有類名，否則名為red的元素就會顯示為黃色。

因此，應該根據“它們是什么”來為元素命名，而不應該根據“它們的外觀如何”來命名，這種方式會讓代碼更有意義，並且避免代碼與設計不同步。對於前面的示例，不要給通知分配類名red，而是應該分配更有意義的名稱，比如，.warning或.notification。有意義的類名的最大優點是可以在整個網站中重用它們。例如，還可以在其他類型的消息上使用.notification類，可以根據它們在文檔中的位置應用完全不同的樣式。

差的名稱	好的名稱
red	error
leftColumn	secondaryContent
topNav	mainNav
firstPara	intro

CSS類選擇器和ID選擇器皆允許以一種獨立於文檔元素的方式來指定樣式，同時二者皆區分大小寫,為了容易辨認，最好統一采用完全小寫的類名和ID，多個單詞之間用連字符分隔，例如，andy-budd比andyBudd清楚的多。

 

ID還是類？

相信你曾和我一樣，常常很難決定一個元素應該使用ID還是類名。一般原則是，類應該應用於概念上相似的元素，這些元素可以出現在頁面上的多個位置，而ID應該應用於不同的唯一的元素。

只有在目標元素非常獨特，絕不會在網站上其他地方別的東西使用這個名稱時，建議使用ID。換句話說，只有在絕對確定這個元素只會出現一次的情況下，才應該使用ID，如果你認為以后可能需要相似的元素，就是用類。

 

最后總結區別如下：

第一：在同一個頁面內，不允許有相同名字的id對象出現，但是允許相同名字的class

第二：當頁面中用到js或者要動態調用對象的時候，要用到id（當然class也會用到，但是id更常用）。

第三：id選擇器不能結合使用，class可單獨使用，也可與其他元素結合使用。

第四：class有多類選擇器，id選擇器則無，如

<p class="important warning">
This paragraph is a very important warning.
</p>