Web前端開發(fā)案例教程第5章課件_第1頁
Web前端開發(fā)案例教程第5章課件_第2頁
Web前端開發(fā)案例教程第5章課件_第3頁
Web前端開發(fā)案例教程第5章課件_第4頁
Web前端開發(fā)案例教程第5章課件_第5頁
已閱讀5頁,還剩26頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(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)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論