之前的文章《什麼是CSS文法？詳細介紹使用方法及規則》中帶了解CSS語法使用方法及規則。下面本篇文章來帶大家來了解CSS中的id選擇器與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>
<h1 id="标题居中">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>
效果圖：
你也可以指定特定的HTML元素使用class。
例如：
在下列實例中, 所有的 p 元素使用 讓該元素的文字居中。
<html>
<head>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 id="这个标题不受影响">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>
</body>
</html>效果圖：
#class選擇器可以被多個html元素使用，因為元素的class屬性沒有必要保證唯一性。另外一個html元素也可以有多個class屬性值，值之間會用","號隔開。如<p class="cls1,cls2"></p>是可以的。
id與class的最基本區別
#id前面應該要加上前綴符號"
#"，而class前面應該加前綴符號"."。id屬性一般在一個頁面中只可以使用一次，而class可以被多次引用。
id作為元素的標籤，用來區分不同結構和內容，而class作為一個樣式，它可以應用到任何結構和內容。
在佈局思路上，一般堅持這樣的原則：id是先確定頁面的結構和內容，然後再為它定義樣式：而class相反，它先定義好一類樣式，然後再頁面中依需求把類別樣式套用到不同的元素和內容上面。
目前瀏覽器都能允許在同一個頁面內出現多個相同屬性值的id，一般情況下也能正常顯示，不過當使用javascript透過id來控制元素時就會出現錯誤。
在實際應用時，class更多的被應用到文字版塊以及頁面修飾等方面，而id更多地被用來實現宏偉佈局和設計包含塊，或包含框的樣式
小結：在css中，id選擇符和class選擇符，都是用來為元素添加色彩的，它們使得我們的整個頁面變得色彩。
注意事項
-
ID屬性不要以數字開頭，數字開頭的ID在Mozilla/Firefox 瀏覽器中不起作用
ID 屬性只能在每個 HTML 文件中出現一次
#class選擇器第一個字元不能使用數字！它無法在 Mozilla 或 Firefox 中起作用
注意要細心
推薦學習：CSS影片教學
以上是css中id選擇器和class選擇器有何不同的詳細內容。更多資訊請關注PHP中文網其他相關文章！
Wufoo ZapierApr 13, 2025 am 11:02 AMWufoo一直在集成方面非常出色。他們與特定應用程序（例如廣告系列顯示器，MailChimp和Typekit）進行集成，但他們也
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
Dreamweaver Mac版
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
SublimeText3 Linux新版
SublimeText3 Linux最新版
WebStorm Mac版
好用的JavaScript開發工具
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
