




版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
1、第5章 CSS3高級選擇器德才兼?zhèn)?知行合一掌握屬性選擇器; 理解關(guān)系選擇器; 熟練使用結(jié)構(gòu)化偽類選擇器; 掌握偽元素選擇器。知識準(zhǔn)備案例實(shí)現(xiàn)2德才兼?zhèn)?知行合一5.15.25.3案例:景點(diǎn)介紹頁面第5章 CSS3高級選擇器結(jié)合高級選擇器,利用HTML5和CSS3,實(shí)現(xiàn)景點(diǎn)介紹頁面。單擊圖1中的某個(gè)景點(diǎn)時(shí),顯示如圖2的效果。要求使用高級選擇器,提高代碼效率。 5.1 案例:景點(diǎn)介紹頁面3德才兼?zhèn)?知行合一圖1圖25.2 知識準(zhǔn)備 4德才兼?zhèn)?知行合一第5章 CSS3高級選擇器5德才兼?zhèn)?知行合一HTML 3.2 5.2 知識準(zhǔn)備使用高級選擇選擇器可以方便的定位于指定的元素,而不用使用額外的cl
2、ass或id,通過這種方式也可以讓我們的代碼和樣式更加簡潔、靈活、易控制。易控制靈活簡潔 5.2.1 屬性選擇器屬性選擇器可以通過元素的屬性來選擇元素。本節(jié)將介紹CSS3新增的3種屬性選擇器:Eatt=val、Eatt$=val、Eatt*=val。Eatt=val屬性選擇器,是指選擇名稱為E,att屬性值以val開頭的元素。如pid=“txt”是指id屬性值以txt字符串為前綴的p標(biāo)記。E可以省略,如果省略則表示可以匹配滿足條件的任意元素。1、 Eatt=val屬性選擇器7德才兼?zhèn)?知行合一 5.2.1 屬性選擇器Eatt$=val屬性選擇器,是指選擇名稱為E,att屬性值以val結(jié)尾的元素
3、。如pid$=“txt”是指id屬性值以txt字符串為后綴的p標(biāo)記。E可以省略,如果省略則表示可以匹配滿足條件的任意元素。2、 Eatt$=val屬性選擇器8德才兼?zhèn)?知行合一 5.2.1 屬性選擇器Eatt*=val屬性選擇器,是指選擇名稱為E,att屬性值包含val的元素。如pid*=“txt”是指id屬性值包含txt字符串的p標(biāo)記。E可以省略,如果省略則表示可以匹配滿足條件的任意元素。2、 Eatt*=val屬性選擇器9德才兼?zhèn)?知行合一 5.2.1 屬性選擇器10德才兼?zhèn)?知行合一 5.2.1 屬性選擇器Eatt$=val屬性選擇器Eatt=val屬性選擇器Eatt*=val屬性選擇器
4、 5.2.2 關(guān)系選擇器本節(jié)介紹3個(gè)關(guān)系選擇器,分別是子代選擇器()、相鄰兄弟選擇器(+)、普通兄弟選擇器()。子代選擇器主要用于選擇某元素的第一級子元素,而且必須是第一級子元素。前面學(xué)習(xí)過的后代選擇器用于選擇某元素的子元素,只要是子元素都可以。1、子代選擇器()12德才兼?zhèn)?知行合一 5.2.2 關(guān)系選擇器相鄰兄弟選擇器(+)和普通兄弟選擇器()統(tǒng)稱兄弟選擇器。相鄰兄弟選擇器用“+”連接兩個(gè)元素,這兩個(gè)元素有相同的父元素,并且第二個(gè)元素緊跟第一個(gè)元素。普通兄弟選擇器用“”連接兩個(gè)元素,這兩個(gè)元素有相同的父元素,第二個(gè)元素不必緊跟第一個(gè)元素。2、相鄰兄弟選擇器(+)和普通兄弟選擇器()13德才
5、兼?zhèn)?知行合一 5.2.2 關(guān)系選擇器14德才兼?zhèn)?知行合一 5.2.2 關(guān)系選擇器子代選擇器()相鄰兄弟選擇器(+)和普通兄弟選擇器()CSS3常用的結(jié)構(gòu)化偽類選擇器有:root選擇器、:not選擇器、:empty選擇器、:target選擇器、:only-child選擇器、:first-child選擇器、:last-child選擇器、:nth-child(n)選擇器、:nth-last-child(n)選擇器、:nth-of-type(n)選擇器、:nth-last-of-type(n)選擇器。 5.2.3 結(jié)構(gòu)化偽類選擇器:root選擇器用于選擇文檔的根元素。在HTML中,文檔的根元素為h
6、tml元素。因此:root選擇器定義的樣式,對本文檔內(nèi)所有元素生效。1、 :root選擇器16德才兼?zhèn)?知行合一 5.2.3 結(jié)構(gòu)化偽類選擇器:not選擇器又被稱為否定選擇器,可以選擇除了某個(gè)元素之外的所有元素。2、 :not選擇器17德才兼?zhèn)?知行合一 5.2.3 結(jié)構(gòu)化偽類選擇器:empty選擇器用于來選擇沒有內(nèi)容的元素。3、 :empty選擇器18德才兼?zhèn)?知行合一 5.2.3 結(jié)構(gòu)化偽類選擇器:target選擇器可用于選取當(dāng)前活動的目標(biāo)元素。當(dāng)用戶單擊了超鏈接,而且此鏈接地址為本頁面內(nèi)的目標(biāo)位置,:target選擇器樣式起作用。4、 :target選擇器19德才兼?zhèn)?知行合一 5.2.
7、3 結(jié)構(gòu)化偽類選擇器only-child選擇器用于匹配屬于父元素中唯一子元素的元素。也就是說,匹配元素的父元素中僅有一個(gè)子元素,而且是一個(gè)唯一的子元素 。5、 :only-child選擇器20德才兼?zhèn)?知行合一 5.2.3 結(jié)構(gòu)化偽類選擇器:first-child選擇器和:last-child選擇器分別用于選擇父元素中的第一個(gè)或者最后一個(gè)子元素。如果父元素內(nèi)子元素較多,我們可以用:nth-child(n)選擇器和:nth-last-child(n)選擇器分別來選擇第n個(gè)或者倒數(shù)第n個(gè)元素。n可以為數(shù)值,也可以為odd(奇數(shù))或even(偶數(shù)),odd和even分別代表子元素中第奇數(shù)個(gè)子元素和第
8、偶數(shù)個(gè)子元素。 6、 :first-child選擇器和:last-child選擇器、:nth-child(n)選擇器和:nth-last-child(n)選擇器21德才兼?zhèn)?知行合一 5.2.3 結(jié)構(gòu)化偽類選擇器:nth-of-type(n)選擇器、:nth-last-of-type(n)選擇器分別用于選擇父元素的特定類型的第n個(gè)子元素或倒數(shù)第n個(gè)子元素。7 、:nth-of-type(n)選擇器、:nth-last-of-type(n)選擇器22德才兼?zhèn)?知行合一 5.2.3 結(jié)構(gòu)化偽類選擇器23德才兼?zhèn)?知行合一:root選擇器:empty選擇器:only-child選擇器:nth-of-
9、type(n)選擇器、:nth-last-of-type(n)選擇器:not選擇器:target選擇器:first-child選擇器、:last-child選擇器、:nth-child(n)選擇器、:nth-last-child(n)選擇器 5.2.3 結(jié)構(gòu)化偽類選擇器偽元素選擇器,是針對CSS中已經(jīng)定義好的偽元素使用的選擇器。常用的偽元素選擇器有:before選擇器和:after選擇器。在最新的CSS3標(biāo)準(zhǔn)中,偽元素選擇器的格式改為雙冒號,這兩個(gè)元素可以寫為:before、:after,但只兼容IE9以上的現(xiàn)代瀏覽器。如果為了往下兼容,可以使用單冒號格式。 5.2.4 偽元素選擇器:before選擇器用于在元素內(nèi)部所有子元素之前插入內(nèi)容,插入的內(nèi)容必須用content屬性值來設(shè)定。1、:before選擇器25德才兼?zhèn)?知行合一 5.2.4 偽元素選擇器:after選擇器用于在元素內(nèi)部所有子元素之后插入內(nèi)容,用法與:before選擇器相同。2、
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 幼教成人高考題目及答案
- VR技術(shù)與教育的融合探索與思考
- 《2025短期技術(shù)人員聘用合同》
- 2025房產(chǎn)知識:簽訂房產(chǎn)合同應(yīng)注意不具備法律效力的合作細(xì)節(jié)
- 銀行晉升面試題目及答案
- 2025年北京市家具定制合同范本
- 應(yīng)聘文員筆試題目及答案
- 銀行測試面試題目及答案
- 音樂上崗證怎么考試試題及答案
- 2025辦公寫字樓租賃合同辦公租用合同
- 公務(wù)車駕駛員安全教育
- 北師大版數(shù)學(xué)四年級上冊第八單元《可能性》大單元整體教學(xué)設(shè)計(jì)
- 系統(tǒng)思維與系統(tǒng)決策:系統(tǒng)動力學(xué)(中央財(cái)經(jīng)大學(xué))知到智慧樹章節(jié)答案
- 《班組安全培訓(xùn)》課件
- 2025年中考道德與法治時(shí)政熱點(diǎn)專題復(fù)習(xí):凝聚榜樣力量 堅(jiān)定文化自信(含練習(xí)題及答案)
- 中小學(xué)網(wǎng)絡(luò)道德教育管理制度
- 中學(xué)籃球社團(tuán)教案全套
- 湖北省部分高中2025屆高三上學(xué)期11月(期中)聯(lián)考語文試題(含答案)
- DB11-T 584-2022 薄抹灰外墻外保溫工程技術(shù)規(guī)程
- 老年癡呆癥的護(hù)理
- 2024秋期國家開放大學(xué)本科《中國當(dāng)代文學(xué)專題》一平臺在線形考(形考任務(wù)一至六)試題及答案
評論
0/150
提交評論