溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了CSS中的id選擇器與class選擇器有什么區別的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇CSS中的id選擇器與class選擇器有什么區別文章都會有所收獲，下面我們一起來看看吧。
id與class的區別：1、id相當于身份標識號一般是不變的，不可以重復：2、class相當于人的名稱可以重復：3、一個html標簽只能綁定一個id名稱：4、一個html標簽可以綁定多個class名稱。
id選擇器和class選擇器介紹
CSS中對html元素的樣式進行控制是通過CSS選擇器來完成的，最常用的兩種選擇器為id選擇器和class選擇器。
一、id 選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
1、id 選擇器以"#"來定義與以#開頭
1）id 選擇器以"#"來定義
下面的兩個 id 選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：
#red {color:red;}
#green {color:green;}下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色：
<p id="red">這個段落是紅色。</p> <p id="green">這個段落是綠色。</p>
2）id選擇器是以#開頭
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。
例如：
1. #para1
2. {
3. text-align:center;
4. color:red;
5. }二、class選擇器
1、class選擇器是以一個點"."號顯示
class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示。
例如：
在以下的例子中，所有擁有 center 類的 HTML 元素均為居中。
<html>
<head>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h2 class="center">標題居中</h2>
<p class="center">段落居中。</p>
</body>
</html>效果圖：
你也可以指定特定的HTML元素使用class。
例如：
在以下實例中, 所有的 p 元素使用 讓該元素的文本居中。
<html>
<head>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h2 class="center">這個標題不受影響</h2>
<p class="center">這個段落居中對齊。</p>
</body>
</html>效果圖：
class選擇器可以被多個html元素使用，因為元素的class屬性沒有必要保證唯一性。另外一個html元素也可以有多個class屬性值，值之間用"."號隔開。如<p class="cls1,cls2"></p>是可以的。
注意事項
ID屬性不要以數字開頭，數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用
ID 屬性只能在每個 HTML 文檔中出現一次
class選擇器第一個字符不能使用數字！它無法在 Mozilla 或 Firefox 中起作用
注意要細心
關于“CSS中的id選擇器與class選擇器有什么區別”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“CSS中的id選擇器與class選擇器有什么區別”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
