在 CSS 中，類選擇器以一個點號顯示：

.center {text-align: center}

在上面的樣例中，全部擁有 center 類的 HTML 元素均為居中。

在以下的 HTML 代碼中，h1 和 p 元素都有 center 類。

這意味著兩者都將遵守 ".center" 選擇器中的規則。

<h1 class="center"> This heading will be center-aligned </h1><p class="center"> This paragraph will also be center-aligned. </p>

CSS ID 選擇器

在某些方面。ID 選擇器類似于類選擇器，只是也有一些重要區別。

語法

首先。ID 選擇器前面有一個 # 號 - 也稱為棋盤號或井號。

請看以下的規則：

*#intro {font-weight:bold;}

與類選擇器一樣，ID 選擇器中能夠忽略通配選擇器。前面的樣例也能夠寫作：

#intro {font-weight:bold;}

這個選擇器的效果將是一樣的。

第二個差別是 ID 選擇器不引用 class 屬性的值。毫無疑問，它要引用 id 屬性中的值。

下面是一個實際 ID 選擇器的樣例：

<p id="intro">This is a paragraph of introduction.</p>

類選擇器還是 ID 選擇器？

在類選擇器這一章中我們曾解說過，能夠為隨意多個元素指定類。

前一章中類名 important 被應用到 p 和 h1 元素，并且它還能夠應用到很多其它元素。

差別 1：僅僅能在文檔中使用一次

與類不同，在一個 HTML 文檔中。ID 選擇器會使用一次，并且僅一次。

差別 2：不能使用 ID 詞列表

不同于類選擇器。ID 選擇器不能結合使用，由于 ID 屬性不同意有以空格分隔的詞列表。

差別 3：ID 能包括很多其它含義

類似于類，能夠獨立于元素來選擇 ID。

有些情況下，您知道文檔中會出現某個特定 ID 值，可是并不知道它會出如今哪個元素上。所以您想聲明獨立的 ID 選擇器。比如。您可能知道在一個給定的文檔中會有一個 ID 值為 mostImportant 的元素。您不知道這個最重要的東西是一個段落、一個短語、一個列表項還是一個小節標題。

您僅僅知道每一個文檔都會有這么一個最重要的內容，它可能在不論什么元素中。并且僅僅能出現一個。在這樣的情況下，能夠編寫例如以下規則：

#mostImportant {color:red; background:yellow;}

這個規則會與下面各個元素匹配（這些元素不能在同一個文檔中同一時候出現，由于它們都有同樣的 ID 值）：

<h1 id="mostImportant">This is important!</h1> <em id="mostImportant">This is important!</em> <ul id="mostImportant">This is important!</ul>

轉載于:https://www.cnblogs.com/brucemengbm/p/6934181.html

總結

以上是生活随笔為你收集整理的css中使用id和class 的不同的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。