《HTML5+CSS3網(wǎng)站設(shè)計基礎(chǔ)教程（第3版）》ppt第4章 CSS3選擇器_第1頁
《HTML5+CSS3網(wǎng)站設(shè)計基礎(chǔ)教程（第3版）》ppt第4章 CSS3選擇器_第2頁
《HTML5+CSS3網(wǎng)站設(shè)計基礎(chǔ)教程（第3版）》ppt第4章 CSS3選擇器_第3頁
《HTML5+CSS3網(wǎng)站設(shè)計基礎(chǔ)教程（第3版）》ppt第4章 CSS3選擇器_第4頁
《HTML5+CSS3網(wǎng)站設(shè)計基礎(chǔ)教程（第3版）》ppt第4章 CSS3選擇器_第5頁
已閱讀5頁，還剩83頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

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

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論