一. 元素(標(biāo)簽) 選擇器
作用:根據(jù)指定標(biāo)簽名稱,在當(dāng)前界面找到所有該名稱的標(biāo)簽,然后為其設(shè)置屬性。
格式:標(biāo)簽名稱{
屬性:屬性值;
}
注意點(diǎn):只要是HTML中的標(biāo)簽,都可以作為標(biāo)簽選擇器。
二. class選擇器
作用:根據(jù)指定類名稱,在當(dāng)前界面找到所有該類名的標(biāo)簽,然后為其設(shè)置屬性。
格式: .類名{
屬性:屬性值;
}
注意點(diǎn):
1.每個(gè)HTML標(biāo)簽都有一個(gè)class屬性
2.在同一個(gè)界面中的class名稱是可以重復(fù)的
3.在編寫類選擇器之前必須添加一個(gè)小數(shù)點(diǎn)(英文狀態(tài)下)
4.類名就是用來(lái)給某個(gè)或多個(gè)特定的標(biāo)簽設(shè)置樣式的
5.在html中一個(gè)標(biāo)簽可以對(duì)應(yīng)多個(gè)類名(命名規(guī)則:class="name1 name2 name3 ...")
三. id選擇器
作用:根據(jù)指定id名稱,在當(dāng)前界面找到該id名的標(biāo)簽,然后為其設(shè)置屬性。
格式: #id名{
屬性:屬性值;
}
注意點(diǎn):
1.每個(gè)HTML標(biāo)簽都有一個(gè)id屬性
2.在同一個(gè)界面中的id名稱是不可以重復(fù)的
3.在編寫id選擇器之前必須添加一個(gè)#(英文狀態(tài)下)
4.類名就是用來(lái)給某個(gè)特定的標(biāo)簽設(shè)置樣式的
5.id名稱不能是html標(biāo)簽的名稱
6.在企業(yè)中一般id多用于js操作,在操作樣式表中用的較少
四. 后代(包含)選擇器
作用:在當(dāng)前界面找到指定標(biāo)簽的所有后代標(biāo)簽中的特定的后代標(biāo)簽,然后為其設(shè)置屬性。
格式: 指定標(biāo)簽名稱 后代標(biāo)簽名稱{
屬性:屬性值;
}
注意點(diǎn):
1.后代選擇器必須用空格隔開(kāi)
2.后代不一定只是兒子,也包括孫子,重孫等,只要是指定標(biāo)簽下的后代標(biāo)簽中相同的標(biāo)簽都被選中
3.后代選擇器不僅可使用標(biāo)簽名稱構(gòu)造選擇器,也可將其他選擇器結(jié)合使用
五. 群組選擇器
作用:根據(jù)選擇器名稱,在當(dāng)前界面找到這些的標(biāo)簽,然后為其設(shè)置屬性。
格式: 選擇器1 ,選擇器2 ,...{
屬性:屬性值;
}
注意點(diǎn):
1.當(dāng)有多個(gè)選擇器應(yīng)用相同樣式時(shí)
2.選擇器之間必須用,(逗號(hào))隔開(kāi)
六. *通配符選擇器
作用:給當(dāng)前界面所有元素(標(biāo)簽)設(shè)置屬性。
格式: *{
屬性:屬性值;
}
注意點(diǎn):運(yùn)用通配符選擇器時(shí),會(huì)遍歷當(dāng)前界面所有標(biāo)簽,當(dāng)標(biāo)簽過(guò)多時(shí),性能也會(huì)變差,企業(yè)中一般很少使用。
七. 偽類選擇器
作用:根據(jù)指定選擇器或標(biāo)簽名稱后接偽類選擇器,設(shè)置其鏈接狀態(tài)屬性。
格式:
1) a:link{屬性:屬性值;}
2) a:visited{屬性:屬性值;}
3) a:hover{屬性:屬性值;}
4) a:active{屬性:屬性值;}
注意點(diǎn):
1.link表示設(shè)置鼠標(biāo)鏈接初始狀態(tài)的屬性
2.visited表示設(shè)置鼠標(biāo)鏈接瀏覽后狀態(tài)的屬性
3.hover表示設(shè)置鼠標(biāo)鏈接懸停狀態(tài)的屬性
4.active表示設(shè)置鼠標(biāo)鏈接激活狀態(tài)的屬性
5.除hover可給其他標(biāo)簽使用外,其余均只能用在超鏈接標(biāo)簽(a)上。
先歸納這六種,均為html+css布局中的常用選擇器,有歸納的不合理的地方,讀友們一定要提出評(píng)論哦。