類和ID選擇器的區別

2022-08-19 04:18:10 字數 2528 閱讀 8836

學習了類選擇器和id選擇器,我們會發現他們之間有很多的相似處,是不是兩者可以通用呢?我們不要著急先來總結一下他們的相同點和不同點:

相同點:可以應用於任何元素

不同點:

1、id選擇器只能在文件中使用一次。與類選擇器不同,在乙個html文件中,id選擇器只能使用一次,而且僅一次。而類選擇器可以使用多次。

下面**是正確的:

<

p>三年級時,我還是乙個<

span

class

="stress"

>膽小如鼠

span

>的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個<

span

class

="stress"

>勇氣

span

>來回答老師提出的問題。

p>

而下面**是錯誤的:

<

p>三年級時,我還是乙個<

span

id="stress"

>膽小如鼠

span

>的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個<

span

id="stress"

>勇氣

span

>來回答老師提出的問題。

p>

2、可以使用類選擇器詞列表方法為乙個元素同時設定多個樣式。我們可以為乙個元素同時設多個樣式,但只可以用類選擇器的方法實現,id選擇器是不可以的(不能使用 id 詞列表)。

下面的**是正確的(完整**在下方)

.stress

.bigsize

<

p>到了<

span

class

="stress bigsize"

>三年級

span

>下學期時,我們班上了一節公開課...

p>

上面**的作用是為「三年級」三個文字設定文字顏色為紅色並且字型大小為25px。

下面的**是不正確的(完整**在下方)

#stressid

#bigsizeid

<

p>到了<

span

id="stressid bigsizeid"

>三年級

span

>下學期時,我們班上了一節公開課...

p>

上面**不可以實現為「三年級」三個文字設定文字顏色為紅色並且字型大小為25px的作用。

完整**:

>類和id選擇器的區別

title

>

<

style

type

="text/css"

>

.stress

.bigsize

#stressid

#bigsizeid

style

>

head

>

<

body

>

<

h1>勇氣

h1>

<

p>三年級時,我還是乙個<

span

class

="stress"

>膽小如鼠

span

>的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個<

span

class

="stress"

>勇氣

span

>來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。

p>

<

p>到了<

span

class

="stress bigsize"

>三年級

span

>下學期時,我們班上了一節公開課,老師提出了乙個很簡單的問題,班裡很多同學都舉手了,甚至成績比我差很多的,也舉手了,還說著:"我來,我來。"我環顧了四周,就我沒有舉手。

p>

<

p>到了<

span

id="stressid bigsizeid"

>三年級

span

>下學期時,我們班上了一節公開課,老師提出了乙個很簡單的問題,班裡很多同學都舉手了,甚至成績比我差很多的,也舉手了,還說著:"我來,我來。"我環顧了四周,就我沒有舉手。

p>

body

>

html

>

類選擇器和ID選擇器

什麼是選擇器?每一條css樣式宣告 定義 由兩部分組成,形式如下 選擇器在 之前的部分就是 選擇器 選擇器 指明了 中的 樣式 的作用物件,也就是 樣式 作用於網頁中的哪些元素。類選擇器 類選擇器在css樣式編碼中是最常用到的,格式如下 類選擇器名稱 注意 1.英文圓點開頭 2.類選擇器名稱可以任意...

ID選擇器和類選擇器

什麼是id選擇器呢 id選擇器的作用是 根據指定的id名稱,找到對應的標籤,然後設定屬性。例如 id選擇器 我是文字 注意點 在同乙個介面中,id的名稱是不可以重複的。在id名稱的前面一定要加上乙個 id名字的組成只能由 字母 數字 下劃線組成。並且滿足變數的寫法,不能以數字開頭。分割線 什麼是類選...

css類選擇器和ID選擇器

語法 類選器名稱 注意 1 英文圓點開頭 2 其中類選器名稱可以任意起名 但不要起中文噢 使用方法 第一步 使用合適的標籤把要修飾的內容標記起來,如下 膽小如鼠 第二步 使用class 類選擇器名稱 為標籤設定乙個類,如下 膽小如鼠 第三步 設定類選器css樣式,如下 stress 類前面要加入乙個...