首頁 > web前端 > html教學 > HTML中id和class的區別

HTML中id和class的區別

WBOY
發布: 2023-08-31 11:53:06
轉載
1838 人瀏覽過

HTML中id和class的區別

在 HTML 中,IdClass 都是元素選擇器,用於根據指派給這些參數的名稱來識別元素。 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中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板