css中class和id選擇器有什么區別

這篇文章將為大家詳細講解有關css中class和id選擇器有什么區別，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

什么是css

css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。

區別：1、id對應css是用樣式選擇符“#”；而class對應css是用樣式選擇符“.”。2、class可以在頁面里面重復使用；而id由于在頁面里面只能出現一次，所以不能重復使用。

CSS Id 和 Class選擇器

如果你要在HTML元素中設置CSS樣式，你需要在元素中設置"id" 和 "class"選擇器。

id 選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。 HTML元素以id屬性來設置id選擇器，CSS 中 id 選擇器以 "#" 來定義。

下面的兩個 id 選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：

#red {color:red;}
#green {color:green;}

下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。

<p id="red">這個段落是紅色。</p>
<p id="green">這個段落是綠色。</p>

class 選擇器

class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個元素中使用。 class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：

.center {text‐align: center}

上面這個例子，所有擁有 center 類的 HTML 元素均為居中。

當然你也可以指定特定的HTML元素使用class。 在下面實例中, 所有的 p 元素使用 class="center" 讓該元素的文本居中:

p.center {text‐align:center;}

css中id和class的區別

1、語法區別：

id對應css是用樣式選擇符“#”（井號）。

class對應css是用樣式選擇符“.”(英文半角輸入句號)。

2、使用次數區別：

class可以在頁面里面重復使用，

id由于在頁面里面只能出現一次，所以不能重復使用，

所以盡量用class來寫，這樣能在頁面里面重復引用你寫的css，減小工作量和代碼量。

關于css中class和id選擇器有什么區別就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。