Web前端開(kāi)發(fā)第8章：選擇器1本章主要內(nèi)容認(rèn)識(shí)CSS選擇器基礎(chǔ)選擇器層次選擇器偽裝選擇器屬性選擇器21.認(rèn)識(shí)CSS選擇器選擇器是CSS的核心，從最初的元素選擇器、類選擇器、ID選擇器，演進(jìn)到偽元素、偽類，以及CSS3提供的更為豐富的選擇器，使得定位頁(yè)面上的任意元素開(kāi)始變得愈發(fā)簡(jiǎn)單。在Web前端開(kāi)發(fā)中，CSS定義著網(wǎng)站最受用戶關(guān)注的前端表現(xiàn)部分，HTML僅展示頁(yè)面內(nèi)容，而CSS則定義這網(wǎng)站各個(gè)部分的顏色、字體、陰影等。31.認(rèn)識(shí)CSS選擇器在CSS代碼中，只是使用了class屬性區(qū)別其他服務(wù)，而此種方法具有以下兩種缺點(diǎn)：class屬性本身并沒(méi)有語(yǔ)義，其純粹是為CSS樣式服務(wù)，對(duì)于元素來(lái)說(shuō)是多余屬性。使用class屬性并沒(méi)有把樣式與元素綁定起來(lái)，針對(duì)同一個(gè)class屬性，文本框可使用，下拉框也可使用，按鈕也可使用。根據(jù)CSS3選擇器功能可將選擇器分為四部分：基礎(chǔ)選擇器、層次選擇器、偽類選擇器、屬性選擇器。42.基礎(chǔ)選擇器基礎(chǔ)選擇器是CSS中最基礎(chǔ)、最常用的選擇器，從CSS的誕生開(kāi)始就一直存在，供Web前端開(kāi)發(fā)者快速的進(jìn)行DOM元素的查找與定位。CSS語(yǔ)法由選擇器、屬性和值三部分組成，具體語(yǔ)法如下：52.1語(yǔ)法2.基礎(chǔ)選擇器62.1語(yǔ)法2.基礎(chǔ)選擇器“*”在CSS中代表所有，即為通配符選擇器。通配符選擇器是用來(lái)選擇所有元素，同時(shí)也可以選擇某個(gè)元素下的所有元素。通配符選擇器用于頁(yè)面定義中：通配符選擇器用于選擇器組合中：通配符選擇器的一種不常用的方式：72.2通配符選擇器8現(xiàn)場(chǎng)演示：案例8-01：通配符選擇器2.基礎(chǔ)選擇器元素選擇器是CSS選擇器中最常見(jiàn)且最基本的選擇器。元素選擇器其實(shí)就是對(duì)文檔的元素進(jìn)行樣式定義，可以為html，body，p，div元素等定義樣式。使用元素選擇器的優(yōu)點(diǎn)：快速的將某個(gè)樣式從一個(gè)元素轉(zhuǎn)移到另一個(gè)元素上。通過(guò)元素選擇器可定義頁(yè)面中所有使用該元素的樣式，減少CSS代碼的書寫。92.3元素選擇器10現(xiàn)場(chǎng)演示：案例8-02：元素選擇器2.基礎(chǔ)選擇器CSS類選擇器允許選擇網(wǎng)頁(yè)元素的類進(jìn)行樣式表應(yīng)用。類選擇器以“.”符號(hào)標(biāo)識(shí)，后面緊跟類名稱。類選擇器是以一種獨(dú)立于文檔元素的方式來(lái)指定樣式，使用類選擇器之前必須在HTML元素上定義類名，換句話說(shuō)需要保證類名在HTML標(biāo)記中存在，這樣才能選擇類。112.4類選擇器2.基礎(chǔ)選擇器類選擇器還可以結(jié)合元素選擇器來(lái)使用。如有多個(gè)元素使用了類名“items”，但只需要在使用類型“items”的li元素上修改樣式，則可將類名稱定義為“l(fā)i.items”。122.4類選擇器注意：

①在網(wǎng)頁(yè)中只要網(wǎng)頁(yè)元素的class屬性定義為classname，都將會(huì)受到該樣式表的影響，而不管它具體是何種類型的網(wǎng)頁(yè)元素。

②類名稱的第一個(gè)字符不能使用數(shù)字，因?yàn)樗鼰o(wú)法在瀏覽器中起作用。13現(xiàn)場(chǎng)演示：案例8-03：類選擇器2.基礎(chǔ)選擇器CSS中的ID選擇器允許選擇網(wǎng)頁(yè)元素的ID進(jìn)行樣式表應(yīng)用，以“#”標(biāo)識(shí)，后面緊跟HTML元素ID名稱。ID選擇器的使用過(guò)程：為某元素建立一個(gè)獨(dú)有的ID。使用ID選擇器對(duì)該元素進(jìn)行樣式表應(yīng)用。142.5ID選擇器注意：網(wǎng)頁(yè)元素的ID是唯一的，對(duì)應(yīng)的CSSID選擇器內(nèi)的樣式表也只能作用于唯一的一個(gè)ID元素。15現(xiàn)場(chǎng)演示：案例8-04：ID選擇器2.基礎(chǔ)選擇器162.6選擇器兼容性基礎(chǔ)選擇器兼容性3.層次選擇器CSS關(guān)系選擇器是一些基礎(chǔ)選擇器按照一定的關(guān)系進(jìn)行組合的選擇器組合。選擇器的關(guān)系使用關(guān)系選擇符表示，關(guān)系選擇符有四個(gè)類別：選擇符、子選擇符、相鄰選擇符、兄弟選擇符層次選擇器基于HTML中DOM元素之間的層次關(guān)系進(jìn)行選擇，快速準(zhǔn)確的找到相關(guān)元素，并對(duì)元素進(jìn)行樣式定制，層次選擇器具體語(yǔ)法：173.1語(yǔ)法3.層次選擇器后代選擇器也被稱作包含選擇器，就是可以選擇某元素的后代元素。比如說(shuō)EF，前面E為祖先元素，F(xiàn)為后代元素。表達(dá)的意思即為選擇了E元素的所有后代F元素。F不管是E元素的子元素或者是孫元素或者是更深層次的關(guān)系，都將被選中，也就是說(shuō)，EF將遞歸選中E元素中的所有F元素。183.2后代選擇器注意：祖先元素和后代元素之間使用一個(gè)空格隔開(kāi)。3.層次選擇器子選擇器只能選擇某元素的子元素。比如說(shuō)E>F，其中E為父元素，而F為子元素，其中E>F所表示的是選擇了E元素下的所有子元素F。和后代選擇器（EF）不同，E>F僅選擇了E元素下的F子元素，更深層次的F元素則不會(huì)被選擇。193.3子選擇器20現(xiàn)場(chǎng)演示：案例8-05：后代選擇器與自選擇器3.層次選擇器相鄰兄弟選擇器可以選擇緊接在另一元素后的元素，而且兩者需具有一個(gè)相同的父元素。比如E+F，E和F元素具有一個(gè)相同的父元素，而且F元素在E元素后面且緊相鄰，這樣就可以使用相鄰兄弟元素選擇器來(lái)選擇F元素。使用相鄰兄弟選擇器增加緊接在h1元素后段落的上邊距：相鄰兄弟選擇器還可以結(jié)合其他選擇器進(jìn)行使用：213.4相鄰兄弟選擇器3.層次選擇器通用兄弟元素選擇器是CSS3新增的選擇器，將選擇某元素后面的所有兄弟元素，通用兄弟元素需要在同一個(gè)父元素之中。比如E~F，E和F元素是屬于同一父元素之內(nèi)，并且F元素在E元素之后，那么E~F選擇器將選擇中所有E元素后面的所有F元素。通用兄弟選擇器和相鄰兄弟選擇器極其相似，不同的是：相鄰兄弟選擇器僅選擇元素與其相鄰的后面元素（僅一個(gè)元素）。通用兄弟元素選擇器，選中的是元素后面的所有兄弟元素。223.5通用兄弟選擇器23現(xiàn)場(chǎng)演示：案例8-06：兄弟選擇器3.層次選擇器層次選擇器實(shí)際可以看成是一種選擇器的組合。利用選擇器的組合，可以更加精確的將樣式應(yīng)用到網(wǎng)頁(yè)元素，以實(shí)現(xiàn)豐富多彩的個(gè)性化顯示。除包含組合之外，還有如下常見(jiàn)的組合：類型限定類：如div.classulli{}。雙重組合類：如div.classul.catlist{}。偽類：如#navh2a:hover{}。上述例子只是為了說(shuō)明選擇器的組合，在實(shí)際應(yīng)用中可能會(huì)有一定差異。243.6選擇器組合3.層次選擇器在實(shí)際應(yīng)用中，應(yīng)善用選擇器組合，可以使CSS文檔更有條理更簡(jiǎn)潔。在實(shí)際的應(yīng)用中有一個(gè)很重要的概念就是選擇器分組，可以將多個(gè)有相同樣式定義的選擇器以逗號(hào)進(jìn)行分組。上述例子表示將標(biāo)題h1至h6及div標(biāo)簽內(nèi)的字體都設(shè)定為14像素。253.6選擇器組合3.層次選擇器263.7選擇器兼容性層次選擇器兼容性4.偽類選擇器CSS偽類用于向某些選擇器添加特殊的效果，以“:”號(hào)表示，且不能單獨(dú)存在。偽類選擇器與類選擇器的區(qū)別：類選擇器可以自由命名。偽類選擇器是CSS中已經(jīng)定義好的選擇器，不能隨便命名和定義。偽類選擇器的語(yǔ)法格式：274.1語(yǔ)法4.偽類選擇器284.1語(yǔ)法4.偽類選擇器動(dòng)態(tài)偽類并不存在于HTML中，只有當(dāng)用戶和網(wǎng)站交互的時(shí)候才能體現(xiàn)出來(lái)，動(dòng)態(tài)偽類包含兩種：在鏈接中?？吹降腻^點(diǎn)偽類，如“:link”和“:visited”。被稱作用戶行為偽類，如“:hover”“:active”和“:focus”。常見(jiàn)的錨點(diǎn)偽類的使用如下：294.2動(dòng)態(tài)偽類選擇器注意：對(duì)于這四個(gè)錨點(diǎn)偽類的設(shè)置，需要特別注意就是它們的先后順序。其順序應(yīng)該為link--visited--hover—active，如果把順序搞錯(cuò)了，會(huì)產(chǎn)生意想不到的錯(cuò)誤。4.偽類選擇器用戶行為偽類錨點(diǎn)的含義：:hover用于當(dāng)用戶把鼠標(biāo)移動(dòng)到元素上面時(shí)的效果。:active用于用戶點(diǎn)擊元素那一下的效果。:focus用于元素成為焦點(diǎn)，這個(gè)經(jīng)常用在表單元素上。304.2動(dòng)態(tài)偽類選擇器31現(xiàn)場(chǎng)演示：案例8-07：超鏈接的偽類選擇器4.偽類選擇器目標(biāo)偽類選擇器“:target”是眾多實(shí)用的CSS3新特性中的一個(gè)，可以用來(lái)匹配HTML的URL中某個(gè)標(biāo)志符的目標(biāo)元素。具體來(lái)說(shuō)，URL中的標(biāo)志符通常會(huì)包含一個(gè)井號(hào)（#），后面帶有一個(gè)標(biāo)志符名稱，例如“#contact”，“:target”就是用來(lái)匹配鏈接中包含“#contact”的元素。在Web頁(yè)面中，一些URL擁有片段標(biāo)識(shí)符，它由一個(gè)井號(hào)（#）后跟一個(gè)錨點(diǎn)或元素ID組合而成，可以鏈接到頁(yè)面的某個(gè)特定元素。“:target”偽類選擇器選取鏈接的目標(biāo)元素，然后定義樣式。324.3目標(biāo)偽類選擇器注意：選擇器定義的樣式在用戶點(diǎn)擊頁(yè)面中的超鏈接并跳轉(zhuǎn)后方起作用。33現(xiàn)場(chǎng)演示：案例8-08：target選擇器34目標(biāo)偽類和動(dòng)態(tài)偽類選擇器兼容性4.偽類選擇器使用語(yǔ)言偽類選擇器來(lái)匹配使用語(yǔ)言的元素是非常有用的，特別是在多語(yǔ)言版本的網(wǎng)站中，其作用更為明顯。語(yǔ)言偽類選擇器是根據(jù)元素的語(yǔ)言編碼匹配元素。這種語(yǔ)言信息必須包含在文檔中或與文檔關(guān)聯(lián)，不能從CSS指定。為文檔指定語(yǔ)言，有兩種方法可以表示：如果使用HTML5，直接可以設(shè)置文檔的語(yǔ)言。手工在文檔中指定lang屬性，并設(shè)置對(duì)應(yīng)的語(yǔ)言值。354.4語(yǔ)言偽類選擇器4.偽類選擇器UI元素狀態(tài)偽類選擇器指定的樣式只有當(dāng)元素處于某種狀態(tài)下才起作用，在默認(rèn)狀態(tài)下是不起作用的。在CSS3中，共有11種UI元素狀態(tài)偽類選擇器，分別是：E:hover、E:active、E:focusE:enabled、E:disabledE:read-only、E:read-writeE:checked、E:default、E:indeterminateE:selection364.5UI元素狀態(tài)偽類選擇器4.偽類選擇器E:hover、E:active、E:focusE:hover選擇器：指定當(dāng)鼠標(biāo)指針移動(dòng)到元素上面時(shí)元素所使用的樣式。E:active選擇器：指定當(dāng)元素被激活的樣式，例如鼠標(biāo)在元素上按下且沒(méi)有松開(kāi)時(shí)。E:focus選擇器：指定元素獲得光標(biāo)焦點(diǎn)時(shí)的樣式，主要是在文本框控件獲得焦點(diǎn)并進(jìn)行文字輸入的使用。374.5UI元素狀態(tài)偽類選擇器38現(xiàn)場(chǎng)演示：案例8-09：有提示效果的輸入框4.偽類選擇器E:enabled、E:disabledE:enabled選擇器：指定當(dāng)元素處于可用狀態(tài)時(shí)的樣式。E:disabled選擇器：指定當(dāng)元素處于不可用狀態(tài)時(shí)的樣式。E:read-only、E:read-writeE:read-only選擇器：指定當(dāng)元素處于只讀狀態(tài)時(shí)的樣式。E:read-write選擇器：指定當(dāng)元素處于非只讀狀態(tài)時(shí)的樣式。394.5UI元素狀態(tài)偽類選擇器4.偽類選擇器E:checked、E:default、E:indeterminateE:checked選擇器：指定當(dāng)表單中radio元素或checkbox元素處于選取狀態(tài)下的樣式。E:default選擇器：指定當(dāng)頁(yè)面打開(kāi)時(shí)默認(rèn)處于選取狀態(tài)的單選框或復(fù)選框控件的元素樣式。E:indeterminate選擇器：用來(lái)指定當(dāng)頁(yè)面打開(kāi)時(shí)，如果一組單選框中任何一個(gè)單選框都沒(méi)有被選中時(shí)，整組單選框的統(tǒng)一樣式。E:selectionE:selection選擇器：指定當(dāng)元素處于選中狀態(tài)時(shí)的樣式。404.5UI元素狀態(tài)偽類選擇器41UI元素偽類選擇器兼容性（1）42UI元素偽類選擇器兼容性（2）4.偽類選擇器root用于指定頁(yè)面根元素的樣式。所謂根元素，是指位于文檔樹(shù)中最頂層結(jié)構(gòu)的元素，在HTML文檔中是指包含著整個(gè)頁(yè)面的<html>部分。empty用來(lái)指定當(dāng)元素內(nèi)容為空時(shí)使用的樣式。434.6結(jié)構(gòu)偽類選擇器44現(xiàn)場(chǎng)演示：案例8-10：root選擇器案例8-11：empty選擇器4.偽類選擇器nth選擇器:first-child:first-child是用來(lái)選擇某個(gè)元素的第一個(gè)子元素。:last-child:last-child選擇器與:first-child選擇器作用類似，:last-child選擇是子元素最后一個(gè)子元素。:nth-child():nth-child()可以選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素。:nth-last-child():nth-last-child()選擇器和上面的:nth-child()相似，該選擇器在進(jìn)行選擇時(shí)是從最后一個(gè)元素開(kāi)始計(jì)算來(lái)選擇特定元素。454.6結(jié)構(gòu)偽類選擇器4.偽類選擇器nth選擇器:nth-of-type():nth-of-type()選擇器類似于:nth-child()選擇器，不同的是僅計(jì)算選擇器中指定的元素類型。:nth-last-of-type():nth-last-of-type()選擇器和:nth-of-type()相似，該選擇器在進(jìn)行選擇時(shí)是從最后一個(gè)元素開(kāi)始計(jì)算來(lái)選擇特定元素的。464.6結(jié)構(gòu)偽類選擇器4.偽類選擇器nth選擇器:first-of-type和:last-of-type:first-of-type和:last-of-type選擇器指定了元素類型進(jìn)行計(jì)算。:only-child和:only-of-type:only-child選擇器用來(lái)指定一個(gè)元素是它的父元素的唯一元素。:only-of-type選擇器用來(lái)指定類型的某元素是它的父元素的唯一元素。474.6結(jié)構(gòu)偽類選擇器48現(xiàn)場(chǎng)演示：案例8-12：改變列表第一項(xiàng)和最后一項(xiàng)案例8-13：選擇偶數(shù)項(xiàng)案例8-14：每個(gè)2項(xiàng)選擇一項(xiàng)案例8-15：改變新聞標(biāo)題的樣式案例8-16：唯一元素的樣式變化49結(jié)構(gòu)偽類選擇器兼容性（1）50結(jié)構(gòu)偽類選擇器兼容性（2）4.偽類選擇器否定選擇器“:not()”是CSS3的新選擇器，類似jQuery中的“:not()”選擇器，主要用來(lái)定位不匹配該選擇器的元素?！?not()”是一個(gè)非常有用的選擇器，可以起到過(guò)濾內(nèi)容的作用，例如以下選擇器表示選擇頁(yè)面中所有元素，除了“footer”元素之外。有時(shí)常在表單元素中使用，舉個(gè)實(shí)例，給表單中所有input定義樣式，除了submit按鈕之外，此時(shí)就可以使用否定選擇器。514.7否定偽類選擇器52現(xiàn)場(chǎng)演示：案例8-17：not選擇器4.偽類選擇器偽元素選擇器，并不是針對(duì)真正元素使用的選擇器，而是針對(duì)CSS中已經(jīng)定義好的偽元素使用的選擇器。在CSS中，主要有四個(gè)偽元素選擇器。first-line偽元素選擇器用于為某個(gè)元素中的第一行文字使用樣式。first-letter偽元素選擇器用于為某個(gè)元素中的文字的首字母使用樣式。在英文中，首字母是第一個(gè)英文字符，在中文或日文中，首字母是第一個(gè)漢字。before偽元素選擇器用于在某個(gè)元素之前插入一些內(nèi)容。after偽元素選擇器用于在某個(gè)元素之后插入一些內(nèi)容。534.8偽元素54現(xiàn)場(chǎng)演示：案例8-18：first-line選擇器案例8-19：first-letter選擇器案例8-20：before選擇器案例8-21：after選擇器55偽元素選擇器兼容性5.屬性選擇器屬性選擇器主要作用是對(duì)帶有指定屬性的HTML元素設(shè)置樣式。使用CSS3屬性選擇器，可以只指定元素某個(gè)屬性，也可同時(shí)指定元素的某個(gè)屬性和其對(duì)應(yīng)的屬性值，其語(yǔ)法如下：在元素類型匹配時(shí)，就可以使用類似正則的匹配方法。[att=val]指定特定名字的元素。[att*=val]匹配val*的元素。[att^=val]匹配val開(kāi)頭的元素，比如id為val1、val432432等。[att$=val]匹配val結(jié)尾的元素，比如id為1213val、fdajlval等。565.1語(yǔ)法5.屬性選擇器E[attr]E[attr]屬性選擇器是CSS3屬性選擇器中最簡(jiǎn)單的一種。如果希望選擇有某個(gè)屬性的元素，而不論這個(gè)屬性值是什么，就可以使用此屬性選擇器。屬性選擇器可以指定一個(gè)屬性，也可以指定多個(gè)屬性。E[attr="value"]