Web前端開發(fā)案例教程第5章課件

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、