CSS 類選擇符和ID選擇符的區別

2022-10-04 11:24:23 字數 1398 閱讀 7099

類選擇符

html**:

css**:

div

.one

如果想讓網頁中某些元素的外觀與其他同類標籤區分開,可以使用類選擇符。

首先給選擇符起乙個名字,然後把這個名字指定給想裝飾的html標籤。例如上乙個例子中,我就給第乙個div命名為「one」。

類選擇符還能精確控制某個元素的外觀,而不管元素使用的是哪個標籤。比如想要裝飾一段話裡的一兩個詞,兒不想影響整個

標籤的外觀。這時就可以用類選擇符選取要裝飾的詞。

需要注意的是,使用類選擇符選取某個標籤裡的部分單詞時,需要借助標籤。

類選擇符的用法:

在html中,class屬性的值前面不用加點號。只有在樣式表中類選擇符的名稱前面需要點號。

乙個標籤使用多個類

除了可以把同乙個類應用到不同的標籤上之外,乙個標籤還可以同時使用多個類。

編寫多個類樣式,在乙個標籤中設定多個類,聽起來要做很多任務作,可在實際開發中卻經常這麼做。比較火的bootstrap框架就這麼做的。

例如我們有多個div,每個div的大小、邊框都一樣,其他屬性各不相同。

html**:

程式設計客棧t;

css**:

/* 型別選擇器 */

div

/* 以下三個都是類選擇器 */

.one

.two

.three

web瀏覽器和html都允許為同乙個標籤設定多個類。在html中,類通過class屬性指定,其值中的每個類名由空格分開。

瀏覽器會把各個類的屬性合併在一起,然後再應用到元素上。

id選擇符

css使用id選擇符選取網頁中的特定部分,例如橫幅、導航欄或者主內容區域。

在html中設定id的方法與設定類的方法差不多,不過使用的屬性不同。

html**:

css**:

div

#d1

www.cppcns.com

在html中,元素設定id屬性。

在css中,用 # 井號開頭,後面跟著id名。

正確地使用id

html的id屬性有些作用是class屬性實現不了的。這些優勢與css沒關係,因此完全可以不適用id選擇符。

id的優勢:

web設計圈有個趨勢,盡量不在css中使用id選擇符。

我的理解是因為id選擇符的特指度比較高,後續如果要覆蓋樣式會增大難度。而且id的使用程度沒類的使用程度廣。

id屬性就相當於我們人的身份證,具有唯一的標示性。

類屬性就有點類似人的價值觀,擁有同一種價值觀的人可以有很多,乙個人也可以同時擁有幾種價值觀。

id選擇器www.cppcns.com和類選擇器的不同點

程式設計客棧

本文標題: css 類選擇符和id選擇符的區別

本文位址:

CSS選擇符 屬性選擇符

使用屬性選擇器可以篩選出設定了特定屬性的標籤。例如選取所有設定了title屬性的 img title 這種選擇符的第一部分是標籤名 img 隨後是屬性名,放在方括號裡 title css不限制屬性選擇符只能使用標籤名,也可以使用類。例如 photo title 用於選取類為photo,而且設定了ti...

CSS選擇符 型別選擇符

h1用於選取特定html標籤的選擇符,叫型別選擇符或元素選擇符。這種選擇符的作用特別大。能把樣式應用到網頁中的每個目標標籤上。使用這種選擇符,只需少量工作就能大幅修改網頁的外觀。假如想讓網頁中每個段落都使用相同的字型 顏色和字型大小,只需編寫乙個選擇符為p 表示標籤 的樣式即可。html 最基本的佐...

CSS 選擇符大全(常用css選擇符)

e 某個元素,如p id 使用id,如 idname class 使用class,如.myclass 萬用字元 包含選擇符 e f e所有的f包含子代,孫代,子子孫孫等等 子選擇符 e相鄰選擇符 e f 和e相鄰的f,相隔乙個都不算 兄弟選擇符 e f 和e同級的f的算 e att e中帶有某個at...