Michael Zippo
將 CSS 類與 ID 進行比較時，區別在於 CSS 類將樣式應用於多個元素。另一方面，ID 將樣式應用於單個元素。 ID 也很特殊，您可以使用特殊的 URL 直接鏈接到一個元素，並由 JavaScript 使用。
CSS ，選擇器用於定位網頁上的特定元素或多個元素。一旦一個元素被定位，一個樣式或一組樣式就可以應用到元素上。
有多種選擇器可用。最常用的兩個是 和 ID。兩者都用於定位具有標題的項目。
有什麼區別n 標籤>和ID?這是許多 CSS 新手提出的問題，我們將在本指南中回答。
當您閱讀完本指南時，您將知道這兩個選擇器之間的區別。您將獲得所需的信息，以便對在代碼中使用哪個選項做出明智的決定。讓我們開始吧。
一個網頁，您想將某些樣式應用於頁面的特定元素。例如，您可以將所有
標籤的文本顏色設置為綠色或更改標題字體大小。
選擇器允許您定位網頁上可以應用樣式的特定元素。 CSS 中有很多可用的選擇器，例如通用選擇器、後代選擇器、子選擇器和分組選擇器。如果您想了解更多關於 CSS 選擇器的信息，請閱讀我們的 CSS 選擇器初學者指南。
兩個選擇器，和id , 分別用於基於分配給 HTML 元素的類和 ID 的樣式元素，但這些選擇器經常令人困惑，因此我們將探討每個選擇器的作用。
id 選擇器允許您定義適用於網頁上單個元素的樣式規則。每個網頁只能有一個帶有單個<的元素一個 ID 屬性。這意味著 ID 選擇器永遠不能用於設置多個元素的樣式。
ID 選擇器使用井號定義。它們後面緊跟標識值您想應用一組樣式規則。下面是一個實際的身份選擇器示例：
這種樣式適用於我們的HTML文檔中id為betaBanner的
元素。該樣式會將元素的背景顏色設置為橙色，將元素中的文本顏色設置為白色。
類選擇器允許您定義適用於 any 的樣式規則元素 具有等於某個值的類屬性。
如上所述 - 標識選擇器不能用於元素樣式。事實上，ID 在一個網頁上只能使用一次。另一方面，課程可用於多個元素。因此，如果您使用類選擇器應用樣式，則共享該類的任何元素都將受制於您定義的樣式。
類選擇器使用句點定義，後跟要使用的類的值你想應用一組樣式。下面是類選擇器的示例：
。這個樣式將我們的
標籤的背景顏色設置為橙色。此外，樣式定義了橙色 標籤，我們可以使用以下代碼：
在這段代碼中，為 orangeBackground 和 large 類定義的所有樣式規則都應用於我們的 Web 元素。但是，使用 ID 卡，我們無法重現此行為，因為每個項目只能有一個 ID。
到目前為止，我們已經討論了 IDs 可以將樣式應用於單個元素。與可以將樣式應用於多個元素的類不同。這不是類和 ID 選擇器之間的唯一區別。
在瀏覽器中，類沒有特殊功能。它們的主要目的是允許您將樣式應用於網頁上的許多元素。另一方面，瀏覽器可以使用 ID 訪問網頁的某個部分。
如果您為元素分配 ID，則可以使用特殊 URL 直接鏈接到該元素元素。這種行為之所以有效，是因為 ID 在網頁上是唯一的。
假設我們要發送一個鏈接到我們的網站，該鏈接會自動滾動到帶有標題的用戶。我們可以使用以下代碼：
在這段代碼中，我們為標籤
Three。現在我們可以向用戶發送指向網頁上該元素的直接滾動鏈接。這是使用以下地址完成的： https://domain .com/index.html#section3
當用戶訪問此 URL（其中 domain.com 是您的站點 URL）時，他們將滾動到 id 為 < em>section3 。此行為不會影響類。
如果您有使用 JavaScript 的經驗 ，你就會知道ID在這種編程語言中是常用的，getElementById函數可以讓你在網頁上選擇一個元素，它是基於只有一個項目可以共享的事實使用相同的 ID。
另一方面，類可以反映網頁上的多個元素。如果您想使用 JavaSc 中的特定元素進行翻錄，它們將沒有用。
HTML 中沒有規則阻止您將 ID 分配給類的元素。
假設我們要將與名為 backgroundOrange 的類關聯的樣式應用於 標記應用獨特的樣式。您可以使用以下代碼：
backgroundOrange 的樣式。此外，它還將使用身份選擇器將樣式應用於 ID customDiv。使用 CSS 時，沒有特定理由讓您在課程中使用 ID 卡。但是，如果你想要一個網頁元素的樣式，最好只使用 ID，如果你想要多個元素的樣式，則使用 ID。
在本教程中我們已經討論過，參考示例，CSS ID 和類選擇器的基礎知識，我們已經比較了兩者。您現在已經準備好開始使用 CSS ID 和類選擇器作為經驗豐富的 開發者！