HTML中id和class的區別

WBOY轉載: 2023-08-31 11:53:061832瀏覽

HTML中id和class的區別

在 HTML 中，Id 和 Class 都是元素選擇器，用於根據指派給這些參數的名稱來識別元素。 ID 和類別選擇器是 CSS (HTML) 中使用最廣泛的元素選擇器。 ID 和 Class 之間的基本差異在於 ID 選擇器僅套用於頁面中的一個元素，而類別選擇器可以套用於單一頁面上的多個元素。

閱讀本文，詳細了解 HTML 中的「id」和「class」以及它們之間的差異。

HTML 中的 ID 是什麼？

在 HTML 中，「id」選擇器用於元素的 id 屬性。對於 HTML 元素，「id」名稱以符號「#」開頭，後面跟著唯一名稱。 id 元素的一個重要特性是我們只能將一個 id 選擇器附加到一個元素。因此，ID 選擇器在 HTML 頁面中始終是唯一的。

ID 選擇器範例

<!DOCTYPE html>
<html>
<head>
<title>
  Id demo
</title>
<style>
  #idDemo{
     color:green;
     font-size:25px;
  }
</style>
</head>
<body style="text-align:center">
   <h1>Get element by Id</h1>
   <p id="idDemo">Demo for Id selector</p>
</body>
</html>

HTML 中的 CLASS 是什麼？

在 HTML 中，「類別」選擇器用於選擇具有特定類別屬性的元素。類別選擇器以句點 (.) 開頭，後面跟著類別名稱。與 id 選擇器不同，我們可以將多個選擇器附加到 HTML 元素。因此，該類別可以在一個頁面內多次套用。關於類別選擇器需要注意的重要一點是類別名稱不能以數字開頭。

類別選擇器範例

<!DOCTYPE html>
<html>
<head>
<title>
	Class demo
</title>
<style>
   .classDemo{
       color:orange;
       font-size:25px;
   }
</style>
</head>
<body style="text-align:center">
	<h1>Get element by class<h1>
	<p class="classDemo">Demo for class selector</p>
</body>
</html>

HTML 中 ID 與 CLASS 的差異

以下是Id和Class &minius之間的重要區別；

鍵	Id	類別
文法	在 HTML 中，對於元素，ID 名稱以「#」符號開頭，後面跟著分配給它的唯一名稱。	指派給元素的「class」的名稱以「.」開頭。後面是類別名稱。
選擇器	一個元素只能附加一個 ID 選擇器。	可以將多個類別選擇器附加到一個元素。
唯一性愛	ID在頁面中是唯一的，最多只能套用於一個元素	#該類別可以應用於多個元素，因此可以在單一頁面上多次套用。

結論

這裡您應該注意的最顯著的差異是，一個元素只能有一個 ID 選擇器，而一個元素可以有多個類別選擇器。但是，ID 和類別選擇器都用於根據指派給元素參數的名稱來識別元素。

以上是HTML中id和class的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html class 选择器

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何修改這段JavaScript程式碼以從JSON檔案中取得圖像URL，並在HTML中顯示它？下一篇：如何修改這段JavaScript程式碼以從JSON檔案中取得圖像URL，並在HTML中顯示它？

看更多