溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS中的id選擇器與class選擇器有什么區(qū)別

發(fā)布時(shí)間：2022-04-22 15:45:02 來(lái)源：億速云 閱讀：399 作者：iii 欄目：大數(shù)據(jù)

這篇文章主要介紹了CSS中的id選擇器與class選擇器有什么區(qū)別的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇CSS中的id選擇器與class選擇器有什么區(qū)別文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

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)行控制是通過(guò)CSS選擇器來(lái)完成的，最常用的兩種選擇器為id選擇器和class選擇器。

一、id 選擇器

id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。

1、id 選擇器以"#"來(lái)定義與以#開(kāi)頭

1）id 選擇器以"#"來(lái)定義

下面的兩個(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選擇器是以#開(kāi)頭

id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。

HTML元素以id屬性來(lái)設(shè)置id選擇器,CSS 中 id 選擇器以 "#" 來(lái)定義。

例如：

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>
<h2 class="center">標(biāo)題居中</h2>
<p class="center">段落居中。</p> 
</body>
</html>

效果圖：

CSS中的id選擇器與class選擇器有什么區(qū)別

你也可以指定特定的HTML元素使用class。

例如：

在以下實(shí)例中, 所有的 p 元素使用 讓該元素的文本居中。

<html>
<head>
<style>
p.center
{
	text-align:center;
}
</style>
</head>

<body>
<h2 class="center">這個(gè)標(biāo)題不受影響</h2>
<p class="center">這個(gè)段落居中對(duì)齊。</p> 
</body>
</html>

效果圖：

CSS中的id選擇器與class選擇器有什么區(qū)別

class選擇器可以被多個(gè)html元素使用，因?yàn)樵氐腸lass屬性沒(méi)有必要保證唯一性。另外一個(gè)html元素也可以有多個(gè)class屬性值，值之間用"."號(hào)隔開(kāi)。如<p class="cls1,cls2"></p>是可以的。

注意事項(xiàng)

  • ID屬性不要以數(shù)字開(kāi)頭，數(shù)字開(kāi)頭的ID在 Mozilla/Firefox 瀏覽器中不起作用

  • ID 屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次

  • class選擇器第一個(gè)字符不能使用數(shù)字！它無(wú)法在 Mozilla 或 Firefox 中起作用

  • 注意要細(xì)心

關(guān)于“CSS中的id選擇器與class選擇器有什么區(qū)別”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“CSS中的id選擇器與class選擇器有什么區(qū)別”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手