第十二課 CSS基本選擇器 css學(xué)習(xí)2

khs1994 發(fā)布于2019-04-23 11:48 / 3001人閱讀

摘要：可以是數(shù)字，關(guān)鍵詞或公式十一目標(biāo)偽類選擇器器目標(biāo)偽類選擇器選擇器可用于選取當(dāng)前活動(dòng)的目標(biāo)元素

基礎(chǔ)選擇器
一、標(biāo)簽選擇器（元素選擇器）
標(biāo)簽選擇器是指用HTML標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱分類
語(yǔ)法：標(biāo)簽名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}

二、類選擇器
1、類選擇器使用"."(英文)+類名進(jìn)行選擇

三、css命名規(guī)范
1、長(zhǎng)名稱或詞組可以使用中橫線來(lái)為選擇器命名
2、不建議使用“_”下劃線來(lái)命名Css選擇器
3、不要用純數(shù)字或中文命名

命名規(guī)范是我們通俗約定。見名知意

四、多類名選擇器
語(yǔ)法：class="類名1 類名2"

五、id選擇器
1、id選擇器使用"#"+id名稱即 #id

六、類選擇器與id選擇器的區(qū)別
1、類選擇器是可以重復(fù)多次使用的
2、id選擇器一般是唯一的，只允許使用一次

七、通配符選擇器
通配符選擇器用“*”表示，它是所有選擇器中作用范圍最廣的，
能匹配頁(yè)面中的所有元素。要謹(jǐn)慎使用。

偽類選擇器用于向某些選擇器添加特殊效果

八、鏈接偽類選擇器（主要針對(duì)于a標(biāo)簽）
1、:link 未訪問(wèn)的鏈接如：a:link{}
2、:visited 已訪問(wèn)過(guò)鏈接如： a:visited{}
3、:hover 鼠標(biāo)移動(dòng)到鏈接上如:a:hover{}
4、:active 選定的鏈接，當(dāng)我們點(diǎn)擊不松開如: a:active{}
注：書寫順序按照 link visited hover active l v h a

九、鏈接偽類選擇器簡(jiǎn)寫
在一般開發(fā)中常用到 link 與hover 偽類
實(shí)際開發(fā)工作中，我們簡(jiǎn)寫就好了

十、結(jié)構(gòu)（位置）偽類選擇器（CSS3）
1、:first-child 選取父元素的首個(gè)元素的制定選擇器
2、:last-child 選取父元素的最后一個(gè)元素的制定選擇器
3、:nth-child(n) 選取屬于父元素的第N個(gè)子元素, 如：n=odd奇數(shù) n=even偶數(shù) n=2n 偶數(shù) n=2n+1奇數(shù)
4、:nth-last-child(n) 選取父元素的第n個(gè)子元素，
不論與元素類型，從最后一個(gè)子元素開始計(jì)數(shù)。
n 可以是數(shù)字，關(guān)鍵詞或公式

十一、目標(biāo)偽類選擇器器
:target目標(biāo)偽類選擇器選擇器可用于選取當(dāng)前活動(dòng)的目標(biāo)元素