CSS常用選擇器1

一. 元素(標(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)論哦。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,923評(píng)論 18 139
  • 選擇器: 標(biāo)簽選擇器格式:標(biāo)簽名稱{屬性:值;} id選擇器格式: id名稱{ } 類選擇器格式:.類名{屬性:值...
    往事一塊六毛八閱讀 438評(píng)論 0 0
  • CSS選擇器 標(biāo)簽選擇器 什么是標(biāo)簽選擇器? 作用: 根據(jù)指定的標(biāo)簽名稱, 在當(dāng)前界面中找到所有該名稱的標(biāo)簽, 然...
    Jackson_yee_閱讀 515評(píng)論 0 0
  • ## CSS選擇器 # 標(biāo)簽選擇器 # id選擇器 # 類選擇器 # 后代選擇器 # 子元素選擇器 # 交集選擇器...
    KsKison閱讀 577評(píng)論 0 0
  • 標(biāo)簽選擇器 什么是標(biāo)簽選擇器? 作用: 根據(jù)指定的標(biāo)簽名稱, 在當(dāng)前界面中找到所有該名稱的標(biāo)簽, 然后設(shè)置屬性格式...
    e919b03f06c2閱讀 297評(píng)論 0 0