站長(zhǎng)資訊網(wǎng)
本篇文章給大家id與class的區(qū)別介紹了解一下，1、id相當(dāng)于身份標(biāo)識(shí)號(hào)一般是不變的，不可以重復(fù)：2、class相當(dāng)于人的名稱可以重復(fù)：3、一個(gè)html標(biāo)簽只能綁定一個(gè)id名稱：4、一個(gè)html標(biāo)簽可以綁定多個(gè)class名稱。
id選擇器和class選擇器介紹
CSS中對(duì)html元素的樣式進(jìn)行控制是通過CSS選擇器來完成的，最常用的兩種選擇器為id選擇器和class選擇器。
一、id 選擇器
id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。
1、id 選擇器以"#"來定義與以#開頭
1）id 選擇器以"#"來定義
下面的兩個(gè) id 選擇器，第一個(gè)可以定義元素的顏色為紅色，第二個(gè)定義元素的顏色為綠色：
#red {color:red;} #green {color:green;}
下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色：
<p id="red">這個(gè)段落是紅色。</p> <p id="green">這個(gè)段落是綠色。</p>
2）id選擇器是以#開頭
id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設(shè)置id選擇器,CSS 中 id 選擇器以 "#" 來定義。
例如：
1. #para1 2. { 3. text-align:center; 4. color:red; 5. }
二、class選擇器
1、class選擇器是以一個(gè)點(diǎn)"."號(hào)顯示
class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個(gè)元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個(gè)點(diǎn)"."號(hào)顯示。
例如：
在以下的例子中，所有擁有 center 類的 HTML 元素均為居中。
<html> <head> <style> .center { text-align:center; } </style> </head> <body> <h1 class="center">標(biāo)題居中</h1> <p class="center">段落居中。</p> </body> </html>
效果圖：
你也可以指定特定的HTML元素使用class。
例如：
在以下實(shí)例中, 所有的 p 元素使用 讓該元素的文本居中。
<html> <head> <style> p.center { text-align:center; } </style> </head> <body> <h1 class="center">這個(gè)標(biāo)題不受影響</h1> <p class="center">這個(gè)段落居中對(duì)齊。</p> </body> </html>
效果圖：
class選擇器可以被多個(gè)html元素使用，因?yàn)樵氐腸lass屬性沒有必要保證唯一性。另外一個(gè)html元素也可以有多個(gè)class屬性值，值之間用"."號(hào)隔開。如<p class="cls1,cls2"></p>是可以的。
注意事項(xiàng)
-
ID屬性不要以數(shù)字開頭，數(shù)字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用
-
ID 屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次
-
class選擇器第一個(gè)字符不能使用數(shù)字！它無法在 Mozilla 或 Firefox 中起作用
-
注意要細(xì)心
推薦學(xué)習(xí)：CSS視頻教程
