0%

CSS: 標籤、類別、ID選擇器

CSS中要對html元素做操作就會需要用到所謂的選擇器來選取DOM元素,這裡會介紹幾個基礎且常見的選擇器。

標籤選擇器(Type Selector)

html中有許多的標籤,之前這篇也有介紹一些常見的標籤,想當然可以直接選取標籤並為他們制定規則[註1]。

標籤選擇器不需要多寫什麼,直接寫上標籤名稱即可,像我這裡就幫h1加了背景。

類別選擇器(Class Selector)

因為標籤選擇器只能選取所有相同類別的標籤而不能單獨對某個特定標籤做出處理,所以就有了類別選擇器,可以在標籤上加上屬性class,選擇時可以針對class name做選取

類別選擇器的寫法是在要選取的class name前面加上一個 .

ID選擇器(ID Selector)

和類別選擇器很類似,ID選擇器也可以針對特定元素做出處理

和class寫法不同,ID是在ID前面加上 #

[註1]所謂的規則(Rule)指的就是選擇器加上css屬性,例如:

1
2
3
h1{
color: white;
}

總結

我自己比較常用到標籤與類別選擇器,至於類別和ID選擇器的差異會留到新文章來做比較。