2023學(xué)年完整公開課版CSS層次選擇器

——CSS層次選擇器移動(dòng)商務(wù)系統(tǒng)前端設(shè)計(jì)1層次選擇器CSS層次選擇器層次選擇器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)元素，并對元素進(jìn)行樣式定制，層次選擇器具體語法：層次選擇器后代選擇器也被稱作包含選擇器，就是可以選擇某元素的后代元素。比如說EF，前面E為祖先元素，F(xiàn)為后代元素。表達(dá)的意思即為選擇了E元素的所有后代F元素。F不管是E元素的子元素或者是孫元素或者是更深層次的關(guān)系，都將被選中，也就是說，E

F將遞歸選中E元素中的所有F元素。注意：祖先元素和后代元素之間使用一個(gè)空格隔開。層次選擇器子選擇器只能選擇某元素的子元素。比如說E>F，其中E為父元素，而F為子元素，其中E>F所表示的是選擇了E元素下的所有子元素F。和后代選擇器（EF）不同，E>F僅選擇了E元素下的F子元素，更深層次的F元素則不會被選擇。層次選擇器現(xiàn)場演示：案例8-05：后代選擇器與自選擇器層次選擇器相鄰兄弟選擇器可以選擇緊接在另一元素后的元素，而且兩者需具有一個(gè)相同的父元素。比如E+F，E和F元素具有一個(gè)相同的父元素，而且F元素在E元素后面且緊相鄰，這樣就可以使用相鄰兄弟元素選擇器來選擇F元素。使用相鄰兄弟選擇器增加緊接在h1元素后段落的上邊距：相鄰兄弟選擇器還可以結(jié)合其他選擇器進(jìn)行使用：層次選擇器通用兄弟元素選擇器是CSS3新增的選擇器，將選擇某元素后面的所有兄弟元素，通用兄弟元素需要在同一個(gè)父元素之中。比如E~F，E和F元素是屬于同一父元素之內(nèi)，并且F元素在E元素之后，那么E~F選擇器將選擇中所有E元素后面的所有F元素。通用兄弟選擇器和相鄰兄弟選擇器極其相似，不同的是：相鄰兄弟選擇器僅選擇元素與其相鄰的后面元素（僅一個(gè)元素）。通用兄弟元素選擇器，選中的是元素后面的所有兄弟元素。層次選擇器現(xiàn)場演示：案例8-06：兄弟選擇器層次選擇器層次選擇器實(shí)際可以看成是一種選擇器的組合。利用選擇器的組合，可以更加精確的將樣式應(yīng)用到網(wǎng)頁元素，以實(shí)現(xiàn)豐富多彩的個(gè)性化顯示。除包含組合之外，還有如下常見的組合：類型限定類：如div.classulli{}。雙重組合類：如div.classul.catlist{}。偽類：如#navh2a:hover{}。上述例子只是為了說明選擇器的組合，在實(shí)際應(yīng)用中可能會有一定差異。層次選擇器在實(shí)際應(yīng)用中，應(yīng)善用選擇器組合，可以使CSS文檔更有條理更簡潔。在實(shí)際的應(yīng)用中有一個(gè)很重要的概念就是選擇器分組，可以將多個(gè)有相同樣式定義的選擇器以逗號進(jìn)