《HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程（第3版）》ppt第4章 CSS3選擇器

第4章CSS3選擇器《HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程（第3版）》學(xué)習(xí)目標(biāo)/Target熟悉屬性選擇器的用法，了解不同屬性選擇器的功能。掌握關(guān)系選擇器的用法，能夠使用關(guān)系選擇器選取父標(biāo)簽中嵌套的子標(biāo)簽。掌握結(jié)構(gòu)化偽類選擇器的用法，能夠使用不同功能的結(jié)構(gòu)化偽類選擇器精準(zhǔn)控制標(biāo)簽樣式。掌握狀態(tài)化偽類選擇器的用法，能夠使用狀態(tài)化偽類選擇器設(shè)置導(dǎo)航顯示樣式。掌握偽元素選擇器的用法，能夠使用偽元素選擇器為標(biāo)簽添加內(nèi)容樣式。章節(jié)概述/Summary選擇器是CSS3中一個(gè)重要的內(nèi)容，在上一章中已經(jīng)介紹過一些常用的選擇器，但在CSS3中還有一些選擇器，使用這些選擇器可以大幅度提高設(shè)計(jì)者書寫和修改樣式表的效率。本章將詳細(xì)介紹CSS3中其他類型的選擇器。目錄/Contents4.3結(jié)構(gòu)化偽類選擇器4.2關(guān)系選擇器4.1屬性選擇器目錄/Contents4.6階段案例——風(fēng)云人物列表頁面4.5偽元素選擇器4.4狀態(tài)化偽類選擇器屬性選擇器4.1屬性選擇器可以根據(jù)標(biāo)簽的屬性及屬性值來選擇對應(yīng)標(biāo)簽，從而為標(biāo)簽設(shè)置差異化的CSS樣式。在CSS中有多種屬性選擇器。例如，E[attribute]選擇器、E[attribute=value]選擇器、E[attribute~=value]選擇器等。本節(jié)將對屬性選擇器進(jìn)行詳細(xì)講解。4.1屬性選擇器4.1.1E[attribute]選擇器熟悉E[attribute]選擇器的用法，能夠說出E[attribute]選擇器的功能。學(xué)習(xí)目標(biāo)4.1屬性選擇器E[attribute]選擇器用于選取標(biāo)簽名稱為E（代指標(biāo)簽名稱），并且定義了attribute（代指屬性名稱）屬性的標(biāo)簽。其中，E可以省略，如果省略則表示可以匹配滿足條件的任意標(biāo)簽。4.1屬性選擇器4.1.1E[attribute]選擇器例如：選取包含id屬性的<div>標(biāo)簽div[id]4.1屬性選擇器案例演示4.1.1E[attribute]選擇器4.1.2E[attribute=value]選擇器熟悉E[attribute=value]選擇器的用法，能夠說出E[attribute=value]選擇器的功能。學(xué)習(xí)目標(biāo)4.1屬性選擇器[align=center]E[attribute=value]選擇器用于選取標(biāo)簽名稱為E（代指標(biāo)簽名稱），并且定義了attribute（代指屬性名稱）屬性和value（代指屬性值字符）屬性值的標(biāo)簽，E也可以省略。4.1屬性選擇器4.1.2E[attribute=value]選擇器例如：選取包含align屬性，屬性值為center的全部標(biāo)簽4.1屬性選擇器案例演示4.1.2E[attribute=value]選擇器4.1.3E[attribute~=value]選擇器熟悉E[attribute~=value]的用法，能夠說出E[attribute~=value]的功能。學(xué)習(xí)目標(biāo)4.1屬性選擇器E[attribute~=value]選擇器用于選取標(biāo)簽名稱為E（代指標(biāo)簽名稱），并且定義了attribute（代指屬性名稱）屬性，包含某個(gè)value（代指屬性值字符）屬性值的標(biāo)簽。4.1屬性選擇器4.1.3E[attribute~=value]選擇器E[attribute~=value]選擇器和E[attribute=value]選擇器的區(qū)別只要標(biāo)簽包含E[attribute~=value]選擇器的屬性值即可被選中。E[attribute~=value]選擇器E[attribute=value]選擇器中屬性和屬性值要和標(biāo)簽中的屬性和屬性值完全一致。E[attribute=value]選擇器4.1屬性選擇器4.1.3E[attribute~=value]選擇器案例演示4.1.4E[attribute|=value]選擇器熟悉E[attribute|=value]選擇器的用法，能夠說出E[attribute|=value]選擇器的功能。學(xué)習(xí)目標(biāo)4.1屬性選擇器E[attribute|=value]選擇器能夠選取帶有value屬性值或以value-開頭的屬性值的標(biāo)簽。4.1屬性選擇器4.1.4E[attribute|=value]選擇器例如：選取屬性值為a或?qū)傩灾狄詀-開頭的標(biāo)簽[class|=a]{font-size:36px;color:green;}4.1.5E[attribute^=value]選擇器熟悉E[attribute^=value]選擇器的用法，能夠說出E[attribute^=value]選擇器的功能。學(xué)習(xí)目標(biāo)4.1屬性選擇器div[id^=section]4.1.5E[attribute^=value]選擇器4.1屬性選擇器E[attribute^=value]選擇器用于選擇標(biāo)簽名稱為E（代指標(biāo)簽名稱），并且定義了attribute（代指屬性名稱）屬性，屬性值前綴為value（代指屬性值字符）字符的標(biāo)簽。例如：選取包含id屬性，且id屬性值是以“section”字符串開頭的<div>標(biāo)簽4.1屬性選擇器案例演示4.1.5E[attribute^=value]選擇器4.1.6E[attribute$=value]選擇器熟悉E[attribute$=value]選擇器的用法，能夠說出E[attribute$=value]選擇器的功能。學(xué)習(xí)目標(biāo)4.1屬性選擇器div[id$=section]4.1屬性選擇器E[attribute$=value]選擇器用于選擇屬性值后綴為value（代指屬性值字符）字符的標(biāo)簽。例如：選取包含id屬性，且id屬性值是以“section”字符串結(jié)尾的<div>標(biāo)簽4.1.6E[attribute$=value]選擇器4.1屬性選擇器案例演示4.1.6E[attribute$=value]選擇器4.1.7E[attribute*=value]選擇器熟悉E[attribute*=value]選擇器的用法，能夠說出E[attribute*=value]選擇器的功能。學(xué)習(xí)目標(biāo)4.1屬性選擇器div[id*=section]4.1屬性選擇器E[attribute*=value]選擇器用于選擇屬性值包含value（代指屬性值字符）字符的標(biāo)簽。例如：選取包含id屬性，且id屬性值包含“section”字符的<div>標(biāo)簽4.1.7E[attribute*=value]選擇器4.1屬性選擇器案例演示4.1.7E[attribute*=value]選擇器關(guān)系選擇器4.2關(guān)系選擇器和第3章的復(fù)合選擇器類似，但關(guān)系選擇器可以更精確地控制標(biāo)簽樣式。CSS3中的關(guān)系選擇器主要包括子元素選擇器和兄弟選擇器，本節(jié)將詳細(xì)講解這兩種關(guān)系選擇器。4.2關(guān)系選擇器4.2.1子元素選擇器掌握子元素選擇器，能夠使用子元素選擇器選取父標(biāo)簽中嵌套的子標(biāo)簽。學(xué)習(xí)目標(biāo)4.2關(guān)系選擇器4.2.1子元素選擇器4.2關(guān)系選擇器子元素選擇器主要用來選擇父級(jí)標(biāo)簽的子標(biāo)簽，由符號(hào)“>”連接標(biāo)簽名稱。h1>strong例如：選取<h1>標(biāo)簽中的子標(biāo)簽<strong>標(biāo)簽4.2.1子元素選擇器4.2關(guān)系選擇器案例演示4.2.2兄弟選擇器掌握兄弟選擇器，能夠使用兄弟選擇器選取父標(biāo)簽中嵌套的子標(biāo)簽。學(xué)習(xí)目標(biāo)4.2關(guān)系選擇器4.2.2兄弟選擇器4.2關(guān)系選擇器兄弟選擇器可以選擇位于同一個(gè)父標(biāo)簽中，指定標(biāo)簽后面，具有并列關(guān)系的子標(biāo)簽。在CSS3中，兄弟選擇器分為鄰近兄弟選擇器和普通兄弟選擇器兩種。使用加號(hào)“+”連接前后兩個(gè)選擇器。選擇器中的兩個(gè)子標(biāo)簽從屬同一個(gè)父標(biāo)簽，而且被選取子標(biāo)簽必須緊跟指定的標(biāo)簽。鄰近兄弟選擇器使用“~”來連接前后兩個(gè)選擇器。選擇器中的兩個(gè)子標(biāo)簽從屬同一個(gè)父標(biāo)簽，而且被選取子標(biāo)簽需要位于指定的標(biāo)簽后面。普通兄弟選擇器4.2.2兄弟選擇器4.2關(guān)系選擇器案例演示案例演示鄰近兄弟選擇器普通兄弟選擇器結(jié)構(gòu)化偽類選擇器4.3結(jié)構(gòu)化偽類選擇器可以根據(jù)HTML文檔結(jié)構(gòu)選擇對應(yīng)的標(biāo)簽，直接設(shè)置樣式。在CSS3中增加了許多新的結(jié)構(gòu)化偽類選擇器，方便網(wǎng)頁設(shè)計(jì)師精準(zhǔn)的控制元素樣式。常用的結(jié)構(gòu)化偽類選擇器有:root選擇器、:not選擇器、:only-child選擇器、:first-child選擇器、:last-child選擇器等。本節(jié)將對這些常用的結(jié)構(gòu)化偽類選擇器做具體介紹。4.3結(jié)構(gòu)化偽類選擇器4.3.1:root選擇器掌握:root選擇器的用法，能夠使用:root選擇器控制標(biāo)簽樣式。學(xué)習(xí)目標(biāo)4.3結(jié)構(gòu)化偽類選擇器4.3結(jié)構(gòu)化偽類選擇器4.3.1:root選擇器:root選擇器用于匹配文檔根標(biāo)簽，在HTML中，根標(biāo)簽指的<html>標(biāo)簽。因此使用:root選擇器定義的樣式，對所有頁面標(biāo)簽都生效。案例演示4.3.2:not選擇器掌握:not選擇器的用法，能夠使用:not選擇器控制標(biāo)簽樣式。學(xué)習(xí)目標(biāo)4.3結(jié)構(gòu)化偽類選擇器4.3結(jié)構(gòu)化偽類選擇器:not選擇器可以排除設(shè)置的標(biāo)簽或?qū)傩?。例如，h3:not(.one)會(huì)選取沒有類名.one的<h3>標(biāo)簽。案例演示4.3.2:not選擇器4.3結(jié)構(gòu)化偽類選擇器如果是排除標(biāo)簽，需要單獨(dú)定義被排除標(biāo)簽的樣式，否則:not選擇器將為全部標(biāo)簽添加樣式。案例演示4.3.2:not選擇器4.3.3:only-child選擇器掌握:only-child選擇器的用法，能夠選擇父標(biāo)簽中唯一的子標(biāo)簽。學(xué)習(xí)目標(biāo)4.3結(jié)構(gòu)化偽類選擇器4.3結(jié)構(gòu)化偽類選擇器:only-child選擇器用于選取父標(biāo)簽中的唯一子標(biāo)簽，也就是說，如果某個(gè)父標(biāo)簽僅有一個(gè)子標(biāo)簽，使用:only-child選擇器可以選擇這個(gè)子標(biāo)簽。案例演示4.3.3:only-child選擇器4.3.4:first-child選擇器和:last-child選擇器掌握:first-child選擇器的用法，能夠選擇父標(biāo)簽中的第一個(gè)子元素。掌握:last-child選擇器的用法，能夠選擇父標(biāo)簽中的最后一個(gè)子標(biāo)簽。學(xué)習(xí)目標(biāo)4.3結(jié)構(gòu)化偽類選擇器4.3結(jié)構(gòu)化偽類選擇器:first-child選擇器用于選擇父標(biāo)簽中的第一個(gè)子標(biāo)簽。:last-child選擇器用于選取父標(biāo)簽中的最后一個(gè)子標(biāo)簽。案例演示4.3.4:first-child選擇器和:last-child選擇器4.3.5:nth-child(n)選擇器和:nth-last-child(n)選擇器掌握:nth-child(n)的用法，能夠選擇父標(biāo)簽中的第二個(gè)子標(biāo)簽。掌握:nth-last-child(n)選擇器的用法，能夠選擇父標(biāo)簽中的倒數(shù)第二個(gè)子標(biāo)簽。學(xué)習(xí)目標(biāo)4.3結(jié)構(gòu)化偽類選擇器4.3.5:nth-child(n)選擇器和:nth-last-child(n)選擇器4.3結(jié)構(gòu)化偽類選擇器為什么需要:nth-child(n)選擇器和:nth-last-child(n)選擇器？原因:使用:first-child選擇器和:last-child選擇器可以選擇父標(biāo)簽中第一個(gè)子標(biāo)簽和最后一個(gè)子標(biāo)簽，但是如果用戶想要選擇其他位置的子標(biāo)簽，例如，第2個(gè)或倒數(shù)第2個(gè)子標(biāo)簽，:first-child選擇器和:last-child選擇器就不起作用了。為此，CSS3引入了:nth-child(n)選擇器和:nth-last-child(n)選擇器。4.3.5:nth-child(n)選擇器和:nth-last-child(n)選擇器4.3結(jié)構(gòu)化偽類選擇器4.3結(jié)構(gòu)化偽類選擇器:nth-child(n)選擇器用于選擇父標(biāo)簽中的第n個(gè)子標(biāo)簽。:nth-last-child(n)用于選取父標(biāo)簽中的倒數(shù)第n個(gè)子標(biāo)簽。4.3.5:nth-child(n)選擇器和:nth-last-child(n)選擇器:nth-child(2)例如：選取父標(biāo)簽中的第2個(gè)子標(biāo)簽4.3結(jié)構(gòu)化偽類選擇器4.3.5:nth-child(n)選擇器和:nth-last-child(n)選擇器案例演示4.3.6:first-of-type選擇器和:last-of-type選擇器掌握:first-of-type選擇器和:last-of-type選擇器的用法，能夠選擇父標(biāo)簽中特定類型的子標(biāo)簽。學(xué)習(xí)目標(biāo)4.3結(jié)構(gòu)化偽類選擇器4.3結(jié)構(gòu)化偽類選擇器:first-of-type選擇器用于匹配父標(biāo)簽中第1個(gè)特定類型的子標(biāo)簽。:last-of-type選擇器用于匹配父標(biāo)簽中最后1個(gè)特定類型的子標(biāo)簽。4.3.6:first-of-type選擇器和:last-of-type選擇器案例演示4.3.7:nth-of-type(n)選擇器和:nth-last-of-type(n)選擇器掌握:nth-of-type(n)選擇器和:nth-last-of-type(n)選擇器的用法，能夠選擇父標(biāo)簽中倒數(shù)第3個(gè)特定類型的子標(biāo)簽。學(xué)習(xí)目標(biāo)4.3結(jié)構(gòu)化偽類選擇器4.3結(jié)構(gòu)化偽類選擇器:nth-of-type(n)選擇器用于匹配父標(biāo)簽中特定類型的第n個(gè)子標(biāo)簽。:nth-last-of-type(n)選擇器用于匹配父標(biāo)簽中特定類型的倒數(shù)第n個(gè)子標(biāo)簽。案例演示4.3.7:nth-of-type(n)選擇器和:nth-last-of-type(n)選擇器4.3.8:empty選擇器掌握:empty選擇器的用法，能夠選擇內(nèi)容為空的標(biāo)簽。學(xué)習(xí)目標(biāo)4.3結(jié)構(gòu)化偽類選擇器4.3結(jié)構(gòu)化偽類選擇器:empty選擇器用來選擇沒有子標(biāo)簽或內(nèi)容為空的所有標(biāo)簽。案例演示4.3.8:empty選擇器4.3.9:target選擇器掌握:target選擇器的用法，能夠凸出顯示目標(biāo)內(nèi)容。學(xué)習(xí)目標(biāo)4.3結(jié)構(gòu)化偽類選擇器4.3結(jié)構(gòu)化偽類選擇器:target選擇器用于突出顯示當(dāng)前活動(dòng)的目標(biāo)元素。只有用戶單擊頁面中的超鏈接，并且跳轉(zhuǎn)到:target選擇器控制的元素后，:target選擇器所設(shè)置的樣式才會(huì)起作用。案例演示4.3.9:target選擇器狀態(tài)化偽類選擇器4.4掌握狀態(tài)化偽類選擇器的用法，能夠設(shè)置超鏈接顯示樣式。學(xué)習(xí)目標(biāo)4.4狀態(tài)化偽類選擇器4.4狀態(tài)化偽類選擇器狀態(tài)化偽類選擇器主要用于在定義超鏈接時(shí)，配合鼠標(biāo)指針操作，使超鏈接在單擊前、單擊后和鼠標(biāo)指針懸停時(shí)顯示不同的樣式。在CSS中的4種狀態(tài)化鏈接偽類狀態(tài)化偽類選擇器描述a:link{CSS樣式;}設(shè)置超鏈接的默認(rèn)樣式。a:visited{CSS樣式;}設(shè)置超鏈接被訪問過之后的樣式。a:hover{CSS樣式;}設(shè)置鼠標(biāo)指針懸停時(shí)超鏈接的樣式。a:active{CSS樣式;}設(shè)置鼠標(biāo)指針單擊不動(dòng)時(shí)超鏈接的樣式。4.4狀態(tài)化偽類選擇器案例演示在實(shí)際工作中，通常只需要使用a:link、a:visited和a:hover定義超鏈接未訪問、訪問后和鼠標(biāo)懸停時(shí)的顯示樣式。并且經(jīng)常對a:link和a:visited應(yīng)用相同的樣式，使未訪問和訪問后的超鏈接樣式保持一致。4.4狀態(tài)化偽類選擇器注意：使用超鏈接的4種狀態(tài)化偽類選擇器時(shí)，對排列順序是有要求的。通常按照a:link、a:visited、a:hover和a:active的順序書寫，否則定義的樣式可能不起作用。4.4狀態(tài)化偽類選擇器偽元素選擇器4.5偽元素選擇器主要用來模擬HTML元素的效果，相當(dāng)于在HTML元素中創(chuàng)建一個(gè)有內(nèi)容的虛擬容器，在不增加HTML元素結(jié)構(gòu)的情況下，設(shè)置對應(yīng)的樣式。本節(jié)將重點(diǎn)介紹偽元素選擇器常用的:before選擇器和:after選擇器。4.5偽元素選擇器4.5.1:before選擇器掌握:before選擇器的用法，能夠在標(biāo)簽前插入內(nèi)容。學(xué)習(xí)目標(biāo)4.5偽元素選擇器4.5.1:before選擇器4.5偽元素選擇器:before選擇器用于在被選取標(biāo)簽的前面插入內(nèi)容。在使用:before選擇器時(shí)必須配合content屬性來指定要插入的具體內(nèi)容。:before選擇器的基本語法格式標(biāo)簽名稱:before{ content:文字/url();}被選取標(biāo)簽位于“:before”之前被插入的內(nèi)容既可以是文字也可以是圖片的url“｛｝”中的content屬性用來指定要插入的具體內(nèi)容4.5.1:before選擇器4.5偽元素選擇器案例演示4.5.2:after選擇器掌握:after選擇器的用法，能夠在標(biāo)簽后插入內(nèi)容。學(xué)習(xí)目標(biāo)4.5偽元素選擇器4.5偽元素選擇器:after選擇器用于在被選取元素的后面插入內(nèi)容。使用方法與:before選擇器相同。4.5.2:after選擇器案例演示在CSS3中，規(guī)范了偽元素選擇器的寫法，用兩個(gè)冒號(hào)來表示偽元素。即將:before改寫為::before，將:after改寫為::after。就目前情況來說:before和:after這種寫法兼容性更好，::before和::after這種寫法更規(guī)范。不過在HTML5和CSS3的頁面開發(fā)中，建議遵循CSS3的規(guī)范要求，使用雙冒號(hào)的寫法表示偽元素選擇器。4.5偽元素選擇器4.5偽元素選擇器偽類偽類和偽元素多學(xué)一招:觀察下圖，如果想選中“小明”，可以采用哪種方式？4.5偽元素選擇器偽類偽類和偽元素多學(xué)一招:方式一：方式二：直接通過名字（基礎(chǔ)選擇器）選中。通過位置——第2排第3列的同學(xué)（偽類）選中。4.5偽元素選擇器偽類偽類和偽元素多學(xué)一招:在獲取某個(gè)元素的時(shí)候，我們可以通過基礎(chǔ)選擇器直接獲取該元素，但要獲取第幾個(gè)元素時(shí)（例如偶數(shù)行元素），我們就無法使用常規(guī)的CSS選擇器獲取，此時(shí)可是使用偽類來獲取想要的元素，例如我們想