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 和類選擇器作為經驗豐富的 開發者！
Latest questions
