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

本篇內(nèi)容主要講解“CSS中的id選擇器與class選擇器的區(qū)別是什么”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“CSS中的id選擇器與class選擇器的區(qū)別是什么”吧!

成都創(chuàng)新互聯(lián)主要從事做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)霍城,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18982081108

本篇文章給大家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>

效果圖：

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ì)心

到此，相信大家對(duì)“CSS中的id選擇器與class選擇器的區(qū)別是什么”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

分享名稱：CSS中的id選擇器與class選擇器的區(qū)別是什么
分享路徑：http://jinyejixie.com/article0/gdhoio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、、營(yíng)銷型網(wǎng)站建設(shè)、定制網(wǎng)站、用戶體驗(yàn)、云服務(wù)器

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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