【原創(chuàng)】CSS3新增選擇器

　　效果在開發(fā)過程中選擇器的作用大家應(yīng)該有一定的了解，在css3中對(duì)于標(biāo)簽的選擇除了css2中已經(jīng)存在的選擇器之外，又添加了一些新的選擇器，比如相鄰兄弟選擇器，通配兄弟選擇器和偽類選擇器，下面我們分別來看一下兄弟選擇器和偽類選擇器如何操作。

　　事例代碼：

　　實(shí)現(xiàn)效果:

　　兄弟選擇器有兩種(相鄰兄弟選擇器，通用兄弟選擇器)

　　相鄰兄弟選擇器：("+")

　　標(biāo)簽1+標(biāo)簽2:選擇緊挨著標(biāo)簽1的下一個(gè)標(biāo)簽

　　如上圖所示，標(biāo)簽1的class為first，現(xiàn)在我想要將要標(biāo)簽2背景顏色設(shè)為黃色此時(shí)我們可以通過兄弟標(biāo)簽來完成，代碼如下(選取first標(biāo)簽后面的相鄰標(biāo)簽li)：

　　效果如圖：

　　注意：現(xiàn)在將body中的first標(biāo)簽后面的標(biāo)簽修改為p此時(shí)我們?cè)倏葱Чa修改如下：

　　此時(shí)在使用上面的方式，此時(shí)我們來看運(yùn)行效果：

　　這是咋回事呢？因?yàn)橄噜徯值軜?biāo)簽選擇器只會(huì)選擇緊跟著+前面標(biāo)簽的后一個(gè)標(biāo)簽，如果該標(biāo)簽不是li此時(shí)選擇失敗，css樣式不再執(zhí)行。

　　通用兄弟選擇器：(~)

　　標(biāo)簽1~標(biāo)簽2:選擇標(biāo)簽1后面的所有標(biāo)簽2

　　代碼跟上面剛開始時(shí)候的代碼一致，此時(shí)對(duì)于first后面的標(biāo)簽設(shè)置代碼如下：

　　效果如下：

　　此時(shí)first后面所有的li標(biāo)簽都變成了黃色。

　　當(dāng)然了在css3中還有一個(gè)選擇器--偽類選擇器，常用的偽類選擇器有下面幾種：

　　事例代碼：

　　事例效果：

　　偽類選擇器1:first-child

　　事例效果：

　　偽類選擇器2:first-of-type

　　事例效果：

　　偽類選擇器：last-child:作用和first-child相似，但是last-child選擇的是最后一個(gè)標(biāo)簽。

　　偽類選擇器：last-of-type:作用和first-of-type相似，但是last-of-type是選擇相同類別標(biāo)簽中的最后一個(gè)。

　　偽類選擇器：nth-child(參數(shù))，此類選擇器可以實(shí)現(xiàn)一次選擇一個(gè)或多個(gè)標(biāo)簽，其中的參數(shù)可以是整數(shù)也可以是2n+1這種類型的表達(dá)式，如果是整數(shù)則表明選擇的是一個(gè)制定的標(biāo)簽，如果是一個(gè)表達(dá)式則證明選擇的是多個(gè)標(biāo)簽比如2n+1選擇多個(gè)奇數(shù)標(biāo)簽。但是需要注意的是選擇的時(shí)候該選擇器并不區(qū)分對(duì)應(yīng)的標(biāo)簽，比如下面的代碼：

　　事例代碼：

　　實(shí)現(xiàn)的效果：

　　對(duì)應(yīng)的選擇器：

　　實(shí)現(xiàn)的效果：

　　但是將其中的1改成2再看效果：

　　原因分析：nth-child(1)選擇.wrap標(biāo)簽下第一個(gè)標(biāo)簽，如果標(biāo)簽為則執(zhí)行css否則不再執(zhí)行。但是如果為nth-child(2)選擇.wrap標(biāo)簽下第二個(gè)標(biāo)簽，如果標(biāo)簽為li則執(zhí)行css否則不執(zhí)行。剛好第一個(gè)標(biāo)簽是li但是第二個(gè)不是，因此會(huì)看到上面的兩種情況。

　　如果選擇器變?yōu)橄旅娴那闆r：

　　運(yùn)行效果：

　　原因分析：如果為2n+1此處n為從0開始的正整數(shù)，此處n的值不固定，直到所有的標(biāo)簽遍歷完畢，該表達(dá)式的含義是選出所有的奇數(shù)標(biāo)簽并且這些奇數(shù)標(biāo)簽必須是li才會(huì)執(zhí)行css，否則不執(zhí)行css，因?yàn)槠鏀?shù)位置剛好都是li，因此會(huì)出現(xiàn)上面的情況。

　　偽類選擇器：nth-last-child(參數(shù))----此處參數(shù)跟nth-child的情況相同，作用原理跟nth-child相同，只不過該選擇器選擇標(biāo)簽的時(shí)候是從后向前選擇的。

　　偽類選擇器：nth-of-type(參數(shù))----該參數(shù)跟nth-child的參數(shù)取值相同，只不過該選擇器作用是選擇相同種類的標(biāo)簽，比如下面的代碼：

　　運(yùn)行效果：

　　原理分析：從當(dāng)前的.wrap標(biāo)簽中將相同層級(jí)的子標(biāo)簽li按照從上到下的順序從其中選出并依次排序，之后從排序之后的標(biāo)簽li中選擇第二個(gè)將其顏色設(shè)置為黃色。剛好第二個(gè)li就是上圖的第三個(gè)標(biāo)簽，因此看到上面的現(xiàn)象。

　　偽類選擇器：last-of-type(參數(shù))，參數(shù)的取值和nth-child相同，且作用原理跟上面的nth-of-type相同，只不過篩選的過程是從后向前依次篩選并排序

　　偽類選擇器only-child

　　事例代碼：

　　選擇器代碼：

　　運(yùn)行效果：

　　原理分析：上面的only-child作用是選擇當(dāng)前div標(biāo)簽中只有一個(gè)子標(biāo)簽，并且該子標(biāo)簽是p標(biāo)簽的時(shí)候執(zhí)行css否則不執(zhí)行，因此我們會(huì)看到上面的結(jié)果。

　　偽類選擇器：empty

　　事例代碼：

　　作用原理：選擇div標(biāo)簽中所有的p標(biāo)簽，但是p標(biāo)簽中內(nèi)容是空的，這樣的p標(biāo)簽使用對(duì)應(yīng)的css樣式。

　　ok到這里就是我們?cè)陂_發(fā)過程中使用的所有偽類選擇器。希望對(duì)大家的學(xué)習(xí)能起到一定的幫助作用。