HTML5 CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）課件 第4章 CSS3中其他類型的選擇器_第1頁(yè)
HTML5 CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）課件 第4章 CSS3中其他類型的選擇器_第2頁(yè)
HTML5 CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）課件 第4章 CSS3中其他類型的選擇器_第3頁(yè)
HTML5 CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）課件 第4章 CSS3中其他類型的選擇器_第4頁(yè)
HTML5 CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）課件 第4章 CSS3中其他類型的選擇器_第5頁(yè)
已閱讀5頁(yè)，還剩27頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第4章CSS3中其他類型的選擇器《HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）》學(xué)習(xí)目標(biāo)/Target

掌握偽元素選擇器的用法，能夠使用偽元素選擇器控制標(biāo)簽的樣式

掌握關(guān)系選擇器的用法，能夠使用關(guān)系選擇器選擇父標(biāo)簽中嵌套的子標(biāo)簽

掌握結(jié)構(gòu)化偽類選擇器的用法，能夠使用不同功能的結(jié)構(gòu)化偽類選擇器精確選擇

對(duì)應(yīng)的標(biāo)簽

熟悉屬性選擇器的用法，能夠闡明不同屬性選擇器的特點(diǎn)章節(jié)概述/Summary選擇器在CSS3中是比較重要的內(nèi)容。第3章已經(jīng)介紹了CSS基礎(chǔ)選擇器和復(fù)合選擇器，它們基本能夠滿足開發(fā)者的設(shè)計(jì)需求。然而，在CSS3中還有一些其他類型的選擇器，它們可以提高開發(fā)者編寫和修改CSS樣式的效率。本章將詳細(xì)介紹CSS中其他類型的選擇器。目錄/Contents010203屬性選擇器關(guān)系選擇器結(jié)構(gòu)化偽類選擇器04偽元素選擇器05階段案例——制作列車時(shí)刻表屬性選擇器4.14.1屬性選擇器本節(jié)將介紹常用的3種屬性選擇器。屬性選擇器可以根據(jù)標(biāo)簽的屬性及屬性值來選擇對(duì)應(yīng)標(biāo)簽。E[attribute^=value]選擇器E[attribute$=value]選擇器E[attribute*=value]選擇器4.1.1E[attribute^=value]選擇器E[attribute^=value]選擇器用于選擇標(biāo)簽名稱為E（代指標(biāo)簽名稱）、屬性為attribute（代指屬性名稱）、屬性值以value（代指屬性值字符串）開始的標(biāo)簽。概念例如：div[id^=section]用于匹配包含id屬性，且id屬性值是以section開始的<div>標(biāo)簽。4.1.2E[attribute$=value]選擇器E[attribute$=value]選擇器用于選擇屬性值以value（代指屬性值字符串）結(jié)尾的標(biāo)簽。概念例如：

div[id$=section]表示匹配包含id屬性，且id屬性值以section結(jié)尾的<div>標(biāo)簽。4.1.3E[attribute*=value]選擇器E[attribute*=value]選擇器用于選取標(biāo)簽名稱為E（代指標(biāo)簽名稱）、屬性為attribute（代指屬性名稱）、屬性值包含value（代指屬性值字符串）的標(biāo)簽。概念例如：div[id*=section]表示匹配包含id屬性，且id屬性值包含section字符串的<div>標(biāo)簽。關(guān)系選擇器4.24.2關(guān)系選擇器在CSS3中，使用關(guān)系選擇器可以選擇指定標(biāo)簽的特定子標(biāo)簽或兄弟標(biāo)簽。通過這種方式，可以更精細(xì)地控制網(wǎng)頁(yè)中標(biāo)簽的樣式。關(guān)系選擇器由多個(gè)基礎(chǔ)選擇器組成，主要包括子代關(guān)系選擇器和兄弟關(guān)系選擇器。本節(jié)將詳細(xì)講解這兩種關(guān)系選擇器。4.2.1子代關(guān)系選擇器子代關(guān)系擇器由多個(gè)基礎(chǔ)選擇器組成，各基礎(chǔ)選擇器之間使用“>”連接，主要用來選擇某個(gè)父級(jí)標(biāo)簽的子標(biāo)簽。概念h1strong>例如：想要選擇<h1>標(biāo)簽的子標(biāo)簽<strong>，可以使用子代關(guān)系選擇器

h1>strong。4.2.2兄弟關(guān)系選擇器兄弟關(guān)系選擇器用于選擇位于同一個(gè)父標(biāo)簽中、指定標(biāo)簽后，且和指定標(biāo)簽具有并列關(guān)系的子標(biāo)簽。概念鄰接兄弟選擇器通用兄弟選擇器4.2.2兄弟關(guān)系選擇器兄弟關(guān)系選擇器用于選擇位于同一個(gè)父標(biāo)簽中、指定標(biāo)簽后，且和指定標(biāo)簽具有并列關(guān)系的子標(biāo)簽。概念鄰接兄弟選擇器該選擇器使用加號(hào)“+”來連接前后兩個(gè)基礎(chǔ)選擇器。其中“+”前面的基礎(chǔ)選擇器用于選擇指定標(biāo)簽，“+”后面的基礎(chǔ)選擇器用于選擇緊挨著指定標(biāo)簽的標(biāo)簽。指定標(biāo)簽和被選擇的標(biāo)簽的父標(biāo)簽相同，其他標(biāo)簽不會(huì)被選擇。4.2.2兄弟關(guān)系選擇器兄弟關(guān)系選擇器用于選擇位于同一個(gè)父標(biāo)簽中、指定標(biāo)簽后，且和指定標(biāo)簽具有并列關(guān)系的子標(biāo)簽。概念通用兄弟選擇器通用兄弟選擇器使用“~”來連接前后兩個(gè)基礎(chǔ)選擇器。其中“~”前面的基礎(chǔ)選擇器用于選擇指定標(biāo)簽，“~”后面的基礎(chǔ)選擇器用于選擇指定標(biāo)簽之后同一類型的子標(biāo)簽，其他位置和不同類型的子標(biāo)簽不會(huì)被選擇。結(jié)構(gòu)化偽類選擇器4.34.3結(jié)構(gòu)化偽類選擇器結(jié)構(gòu)化偽類選擇器能根據(jù)HTML文檔結(jié)構(gòu)選擇對(duì)應(yīng)的標(biāo)簽，即使在沒有添加class屬性或id屬性的情況下，也能使用結(jié)構(gòu)化偽類選擇器選擇結(jié)構(gòu)復(fù)雜的標(biāo)簽。CSS3中提供了多種結(jié)構(gòu)化偽類選擇器，它們以“:”作為前綴，包括:root選擇器、:not選擇器、:only-child選擇器、:first-child選擇器、:last-child選擇器等。本節(jié)將詳細(xì)介紹這些常用的結(jié)構(gòu)化偽類選擇器。4.3.1:root選擇器:root選擇器用于匹配文檔根標(biāo)簽，即<html>標(biāo)簽。使用:root選擇器定義的樣式適用于頁(yè)面中的所有標(biāo)簽。4.3.2:not選擇器:not選擇器用于選擇除特定標(biāo)簽之外的所有標(biāo)簽。在:not之前，可以添加標(biāo)簽名，指定要選擇的標(biāo)簽類型；在:not之后，需要添加括號(hào)，在括號(hào)內(nèi)指定要排除的標(biāo)簽。4.3.3:only-child選擇器:only-child選擇器用于選擇父標(biāo)簽中的唯一子標(biāo)簽，也就是說，如果某個(gè)父標(biāo)簽僅有一個(gè)子標(biāo)簽，使用:only-child選擇器可以選擇這個(gè)子標(biāo)簽。4.3.4:first-child選擇器和:last-child選擇器:first-child選擇器和:last-child選擇器的用法類似。:first-child選擇器用于選擇父標(biāo)簽中的第一個(gè)子標(biāo)簽；:last-child選擇器用于選擇父標(biāo)簽中的最后一個(gè)子標(biāo)簽。4.3.5:nth-child(n)選擇器和:nth-last-child(n)選擇器:nth-child(n)選擇器和:nth-last-child(n)選擇器是:first-child和:last-child選擇器的擴(kuò)展，用于選擇父標(biāo)簽中其他位置的子標(biāo)簽。其中，:nth-child(n)選擇器可用于選擇父標(biāo)簽中的第n個(gè)子標(biāo)簽，:nth-last-child(n)選擇器用于選擇父標(biāo)簽中的倒數(shù)第n個(gè)子標(biāo)簽。4.3.6:first-of-type選擇器和:last-of-type選擇器:first-of-type選擇器和:last-of-type選擇器用于匹配父標(biāo)簽中特定類型的子標(biāo)簽。其中，:first-of-type選擇器用于匹配父標(biāo)簽中第1個(gè)特定類型的子標(biāo)簽，而:last-of-type選擇器用于匹配父標(biāo)簽中最后一個(gè)特定類型的子標(biāo)簽。4.3.7:nth-of-type(n)選擇器和:nth-last-of-type(n)選擇器:nth-of-type(n)選擇器和:nth-last-of-type(n)選擇器用于匹配父標(biāo)簽中特定類型的第n個(gè)子標(biāo)簽和倒數(shù)第n個(gè)子標(biāo)簽，n的取值為數(shù)字、odd（奇數(shù)）或even（偶數(shù)）。4.3.8:empty選擇器:empty選擇器用來選擇沒有子元素或內(nèi)容為空的所有元素。偽元素選擇器4.44.4偽元素選擇器偽元素選擇器是CSS3中的一種特殊選擇器，它可以在不改變HTML標(biāo)簽結(jié)構(gòu)的情況下，在HTML標(biāo)簽的指定位置插入內(nèi)容。偽元素選擇器以“::”作為前綴，這是它和偽類選擇器較為明顯的區(qū)別。CSS3中有很多偽元素選擇器。本節(jié)將介紹兩種常用的偽元素選擇器——::before選擇器和::after選擇器。4.4.1::before選擇器標(biāo)簽名稱::before{content:文字或圖片的url();}:before選擇器用于在標(biāo)簽內(nèi)容前面插入內(nèi)容，必須配合content屬性來指定要插入的具體內(nèi)容。概念語法格式在語法格式中，需要先指定要插入內(nèi)容的標(biāo)簽名稱，使其位于“::before”之前。｛｝中的content屬性用來指定要插入的具體內(nèi)容，插入的內(nèi)容既可以是文字也可以是圖片的URL。4.4.2::after選擇器::after選擇器用于在標(biāo)簽內(nèi)容后面插入內(nèi)容，其使用方法與::before選擇器相同。階段案例——制作列車時(shí)刻表4.54.6階段案例——制作列車時(shí)刻表本章的前幾節(jié)重點(diǎn)介紹了CSS3中各種不同類型選擇器的使用方法。為了幫助讀者更好地掌握這些知識(shí)點(diǎn)，本節(jié)將以案例演示的方式，分步驟講解如何制作一個(gè)列車時(shí)刻表。本章小結(jié)

本章重點(diǎn)講解了CSS3中不同類型的選擇器，包括屬性選擇器、關(guān)

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論