(一)結(jié)構(gòu)性偽類選擇器——first-child
“:first-child”選擇器表示的是選擇父元素的第一個(gè)子元素的元素E。簡(jiǎn)單點(diǎn)理解就是選擇元素中的第一個(gè)子元素,記住是子元素(個(gè)人理解:父元素下的第一代子元素),而不是后代元素。
(二)結(jié)構(gòu)性偽類選擇器——last-child
“:last-child”選擇器與“:first-child”選擇器作用類似,不同的是“:last-child”選擇器選擇的是元素的最后一個(gè)子元素。
(三)結(jié)構(gòu)性偽類選擇器——nth-child(n)
“:nth-child(n)”選擇器用來(lái)定位某個(gè)父元素的一個(gè)或多個(gè)特定的子元素。其中“n”是其參數(shù),而且可以是整數(shù)值(1,2,3,4),也可以是表達(dá)式(2n+1、-n+5)和關(guān)鍵詞(odd、even),但參數(shù)n的起始值始終是1,而不是0。也就是說,參數(shù)n的值為0時(shí),選擇器將選擇不到任何匹配的元素。
經(jīng)驗(yàn)與技巧:當(dāng)“:nth-child(n)”選擇器中的n為一個(gè)表達(dá)式時(shí),其中n是從0開始計(jì)算,當(dāng)表達(dá)式的值為0或小于0的時(shí)候,不選擇任何匹配的元素。如下表所示:
(四)結(jié)構(gòu)性偽類選擇器——nth-last-child(n)
“:nth-last-child(n)”選擇器和前面的“:nth-child(n)”選擇器非常的相似,只是這里多了一個(gè)“l(fā)ast”,所起的作用和“:nth-child(n)”選擇器有所區(qū)別,從某父元素的最后一個(gè)子元素開始計(jì)算,來(lái)選擇特定的元素。
(五)first-of-type選擇器
“:first-of-type”選擇器類似于“:first-child”選擇器,不同之處就是指定了元素的類型,其主要用來(lái)定位一個(gè)父元素下的某個(gè)類型的第一個(gè)子元素。
例如:
/*我要改變第一個(gè)段落的背景為橙色*/
.wrapper > p:first-of-type {
background: orange;
}
(六)nth-of-type(n)選擇器
“:nth-of-type(n)”選擇器和“:nth-child(n)”選擇器非常類似,不同的是它只計(jì)算父元素中指定的某種類型的子元素。當(dāng)某個(gè)元素中的子元素不單單是同一種類型的子元素時(shí),使用“:nth-of-type(n)”選擇器來(lái)定位于父元素中某種類型的子元素是非常方便和有用的。在“:nth-of-type(n)”選擇器中的“n”和“:nth-child(n)”選擇器中的“n”參數(shù)也一樣,可以是具體的整數(shù),也可以是表達(dá)式,還可以是關(guān)鍵詞。
(七)last-of-type選擇器
“:last-of-type”選擇器和“:first-of-type”選擇器功能是一樣的,不同的是他選擇是父元素下的某個(gè)類型的最后一個(gè)子元素。
(八)nth-of-type(n)選擇器
“:nth-last-of-type(n)”選擇器和“:nth-of-type(n)”選擇器是一樣的,選擇父元素中指定的某種子元素類型,但它的起始方向是從最后一個(gè)子元素開始,而且它的使用方法類似于上節(jié)中介紹的“:nth-last-child(n)”選擇器一樣。
(九)only-child選擇器
“:only-child”選擇器選擇的是父元素中只有一個(gè)子元素,而且只有唯一的一個(gè)子元素。也就是說,匹配的元素的父元素中僅有一個(gè)子元素,而且是一個(gè)唯一的子元素。
(十)only-of-type選擇器
“:only-of-type”是表示一個(gè)元素他有很多個(gè)子元素,而其中只有一種類型的子元素是唯一的,使用“:only-of-type”選擇器就可以選中這個(gè)元素中的唯一一個(gè)類型子元素。
代碼示例:
.wrapper > div:only-of-type {
background: orange;
}