任務(wù)五-CSS3選擇器

信息工程系教師：宇虹儒項(xiàng)目四農(nóng)產(chǎn)品網(wǎng)頁(yè)美化任務(wù)五CSS3選擇器知識(shí)導(dǎo)航屬性選擇器關(guān)系選擇器21結(jié)構(gòu)化偽類(lèi)選擇器

偽類(lèi)選擇器34鏈接偽類(lèi)5一屬性選擇器屬性選擇器可以根據(jù)元素的屬性及屬性值來(lái)選擇元素。CSS3中新增了3種屬性選擇器。E[att^=value]E[att$=value]E[att*=value]一屬性選擇器E[att^=value]屬性選擇器1E[att^=value]屬性選擇器是指選擇名稱(chēng)為E的標(biāo)記，且該標(biāo)記定義了att屬性，att屬性值包含前綴為value的子字符串。E是可以省略的，如果省略則表示可以匹配滿(mǎn)足條件的任意元素。一屬性選擇器E[att$=value]屬性選擇器2E[att$=value]屬性選擇器是指選擇名稱(chēng)為E的標(biāo)記，且該標(biāo)記定義了att屬性，att屬性值包含后綴為value的子字符串。與E[att^=value]選擇器一樣，E元素可以省略，如果省略則表示可以匹配滿(mǎn)足條件的任意元素。例如：div[id$=section]表示匹配包含id屬性，且id屬性值是以“section”字符串結(jié)尾的div元素。E[att*=value]屬性選擇器3E[att*=value]選擇器用于選擇名稱(chēng)為E的標(biāo)記，且該標(biāo)記定義了att屬性，att屬性值包含value子字符串。該選擇器與前兩個(gè)選擇器一樣，E元素也可以省略，如果省略則表示可以匹配滿(mǎn)足條件的任意元素。例如：div[id*=section]表示匹配包含id屬性，且id屬性值包含“section”字符串的div元素。一屬性選擇器二關(guān)系選擇器子代選擇器（>）1子代選擇器主要用來(lái)選擇某個(gè)元素的第一級(jí)子元素。h1strong>例如：希望選擇只作為

h1元素子元素的

strong元素，可以這樣寫(xiě)：h1>strong。兄弟選擇器用來(lái)選擇與某元素位于同一個(gè)父元素之中，且位于該元素之后的兄弟元素。臨近兄弟選擇器普通兄弟選擇器兄弟選擇器（+、~）2二關(guān)系選擇器臨近兄弟選擇器普通兄弟選擇器普通兄弟選擇器該選擇器使用加號(hào)“+”來(lái)鏈接前后兩個(gè)選擇器。選擇器中的兩個(gè)元素有同一個(gè)父親，而且第二個(gè)元素必須緊跟第一個(gè)元素。兄弟選擇器（+、~）2二關(guān)系選擇器臨近兄弟選擇器普通兄弟選擇器普通兄弟選擇器普通兄弟選擇器使用“~”來(lái)鏈接前后兩個(gè)選擇器。選擇器中的兩個(gè)元素有同一個(gè)父親，但第二個(gè)元素不必緊跟第一個(gè)元素。臨近兄弟選擇器兄弟選擇器（+、~）2二關(guān)系選擇器三結(jié)構(gòu)化偽類(lèi)選擇器1:root選擇器2:not選擇器3:only-child選擇器4:first-child和:last-child選擇器5:nth-child(n)和:nth-last-child(n)選擇器6:nth-of-type(n)和:nth-last-of-type(n)選擇器7:empty選擇器8:target選擇器常用的結(jié)構(gòu)化偽類(lèi)選擇器有:root選擇器11:root選擇器:root選擇器用于匹配文檔根元素，在HTML中，根元素始終是html元素。也就是說(shuō)使用“:root選擇器”定義的樣式，對(duì)所有頁(yè)面元素都生效。對(duì)于不需要該樣式的元素，可以單獨(dú)設(shè)置樣式進(jìn)行覆蓋。一結(jié)構(gòu)化偽類(lèi)選擇器:not選擇器22:not選擇器如果對(duì)某個(gè)結(jié)構(gòu)元素使用樣式，但是想排除這個(gè)結(jié)構(gòu)元素下面的子結(jié)構(gòu)元素，讓它不使用這個(gè)樣式，可以使用:not選擇器。三結(jié)構(gòu)化偽類(lèi)選擇器:only-child選擇器33:only-child選擇器:only-child選擇器用于匹配屬于某父元素的唯一子元素的元素，也就是說(shuō)，如果某個(gè)父元素僅有一個(gè)子元素，則使用“:only-child選擇器”可以選擇這個(gè)子元素。三結(jié)構(gòu)化偽類(lèi)選擇器:first-child和:last-child選擇器44:first-child和:last-child選擇器:first-child選擇器和:last-child選擇器分別用于為父元素中的第一個(gè)或者最后一個(gè)子元素設(shè)置樣式。三結(jié)構(gòu)化偽類(lèi)選擇器:nth-child(n)和:nth-last-child(n)選擇器55:nth-child(n)和:nth-last-child(n)選擇器使用:first-child選擇器和:last-child選擇器可以選擇某個(gè)父元素中第一個(gè)或最后一個(gè)子元素，但是如果用戶(hù)想要選擇第2個(gè)或倒數(shù)第2個(gè)子元素，這兩個(gè)選擇器就不起作用了。為此，CSS3引入了:nth-child(n)和:nth-last-child(n)選擇器，它們是:first-child選擇器和:last-child選擇器的擴(kuò)展。三結(jié)構(gòu)化偽類(lèi)選擇器:nth-of-type(n)和:nth-last-of-type(n)選擇器66:nth-of-type(n)和:nth-last-of-type(n)選擇器:nth-of-type(n)和:nth-last-of-type(n)選擇器用于匹配屬于父元素的特定類(lèi)型的第n個(gè)子元素和倒數(shù)第n個(gè)子元素。三結(jié)構(gòu)化偽類(lèi)選擇器:empty選擇器77:empty選擇器:empty選擇器用來(lái)選擇沒(méi)有子元素或文本內(nèi)容為空的所有元素。三結(jié)構(gòu)化偽類(lèi)選擇器:target選擇器88:target選擇器:target選擇器用于為頁(yè)面中的某個(gè)target元素（該元素的id被當(dāng)做頁(yè)面中的超鏈接來(lái)使用）指定樣式。只有用戶(hù)單擊了頁(yè)面中的超鏈接，并且跳轉(zhuǎn)到target元素后，:target選擇器所設(shè)置的樣式才會(huì)起作用。三結(jié)構(gòu)化偽類(lèi)選擇器四偽元素選擇器所謂偽元素選擇器，是針對(duì)CSS中已經(jīng)定義好的偽元素使用的選擇器。CSS中常用的偽元素選擇器有:before偽元素選擇器和:after偽元素選擇器:before選擇器:after選擇器:before選擇器:after選擇器:after選擇器:before選擇器1:before偽元素選擇器用于在被選元素的內(nèi)容前面插入內(nèi)容，必須配合content屬性來(lái)指定要插入的具體內(nèi)容。<元素>:before{ content:文字/url();}四偽元素選擇器:before選擇器:after選擇器:after選擇器:after選擇器2:before選擇器:after偽元素選擇器用于在某個(gè)元素之后插入一些內(nèi)容，使用方法與:before選擇器相同。四偽元素選擇器五鏈接偽類(lèi)在CSS中通過(guò)鏈接偽類(lèi)可以實(shí)現(xiàn)不同的鏈接狀態(tài)定義超鏈接時(shí)，為了提高用戶(hù)體驗(yàn)，經(jīng)常需要為超鏈接指定不同的狀態(tài)，使得超鏈接在點(diǎn)擊前、點(diǎn)擊后和鼠標(biāo)懸停時(shí)的樣式不同。超鏈接標(biāo)記<a>的偽類(lèi)含義a:link{CSS樣式規(guī)則