《Web前端開發(fā)基礎(chǔ)》課件-視頻6 偽類選擇器_第1頁
《Web前端開發(fā)基礎(chǔ)》課件-視頻6 偽類選擇器_第2頁
《Web前端開發(fā)基礎(chǔ)》課件-視頻6 偽類選擇器_第3頁
《Web前端開發(fā)基礎(chǔ)》課件-視頻6 偽類選擇器_第4頁
《Web前端開發(fā)基礎(chǔ)》課件-視頻6 偽類選擇器_第5頁
已閱讀5頁，還剩17頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

CSS基礎(chǔ)

--偽類選擇器101動(dòng)態(tài)偽類選擇器狀態(tài)偽類選擇器02否定偽類選擇器03目錄在選取元素時(shí)，我們學(xué)過：

根據(jù)元素名選取元素（標(biāo)記選擇器）根據(jù)ID選擇元素（ID選擇器）根據(jù)類選擇元素（類選擇器）根據(jù)屬性選擇元素（屬性選擇器）根據(jù)位置選擇元素（關(guān)系選擇器）多種選擇器的組合（復(fù)合選擇器）還可以根據(jù)元素的特殊狀態(tài)選取元素，即偽類選擇器和偽元素選擇器。

偽類選擇器定義：是指那些處在特殊狀態(tài)的元素。說明：偽類名可以單獨(dú)使用，泛指所有元素，也可以和元素名稱連起來使用，特指某類元素。格式：以冒號(hào)開頭，元素選擇符合冒號(hào)之間不能有空格，偽類名中間也不能有空格。具體包括：動(dòng)態(tài)偽類選擇器、狀態(tài)偽類選擇器、結(jié)構(gòu)偽類選擇器和否定選擇器。1動(dòng)態(tài)偽類選擇器:link元素被定義了超鏈接但并未被訪問過:visited元素被定義了超鏈接并已被訪問過:active元素被激活:hover鼠標(biāo)懸停:focus元素獲取焦點(diǎn)動(dòng)態(tài)偽類選擇器：在CSS定義中，a:hover必須被置于a:link和a:visited之后；a:active必須被置于a:hover之后。所以，a標(biāo)簽的這四種偽類選擇器的順序?yàn)椋?a:link，a:visited，a:hover，a:active?。必須嚴(yán)格按照此規(guī)則來設(shè)置屬性，否則無效。<html>

<head>

<title>動(dòng)態(tài)偽類選擇器</title>

<styletype="text/css">

a:link{

font-size:20;

}

a:active{

font-size:80;

}

a:hover{

color:red;

}

</style>

</head>

<body>

<ahref="">百度</a>

<hr/>

<ahref="">網(wǎng)易</a>

<hr/>

<ahref="">中央廣播電視</a>

<hr/>

</body>

</html>

2狀態(tài)偽類選擇器:checked選中的復(fù)選按鈕或單選按鈕表單元素:enabled所有啟用的表單元素:disabled所有禁用的表單元素狀態(tài)偽類選擇器：它們主要是針對(duì)form表單元素進(jìn)行操作。3否定偽類選擇器否定偽類選擇器：E:not(F)選擇所有除元素F外的E元素<html><head><title>否定偽類選擇器</title><styletype="text/css">input:not([type="submit"]){border:1pxsolidred;}</style></head><body><form>用戶名：<inputtype="text"/><br/>密碼：<inputtype="text"/><br/><inputtype="submit"value="提交"/></form></body></html>總結(jié)：CSS偽類是用來添加一些選擇器的特殊效果。由于狀態(tài)的變化是非靜態(tài)的，所以元素達(dá)到一個(gè)特定狀態(tài)時(shí)，它可能得到一個(gè)偽類的樣式；當(dāng)狀態(tài)改變時(shí)，它又會(huì)失去這個(gè)樣式。由此可以看出，它的功能和class有些類似，但它是基于文檔之外的抽象，所以叫偽類。CSS基礎(chǔ)

--偽類選擇器2郭春麗01結(jié)構(gòu)偽類選擇器作用目錄02結(jié)構(gòu)偽類選擇器使用案例（1）作用：根據(jù)元素在HTML中的結(jié)構(gòu)關(guān)系查找元素（2）優(yōu)勢(shì)：減少對(duì)于HTML中類選擇器的依賴，有利于保持代碼整潔（3）場(chǎng)景：常用于查找某父級(jí)選擇器中的子元素結(jié)構(gòu)偽類選擇器：選擇器說明示例E:first-child{}匹配父元素中第一個(gè)子元素，且是E元素p:first-child，選擇的是p元素，它屬于其父元素的首個(gè)子元素E:last-child{}匹配父元素中最后一個(gè)子元素，且是E元素E:nth-child(n){}匹配父元素中第n個(gè)子元素，且是E元素p:nth-child(2)，選擇的是p元素，它屬于其父元素的第二個(gè)子元素E:nth-last-child(n){}匹配父元素中倒數(shù)第n個(gè)子元素，且是E元素E:only-child{}父元素內(nèi)只包含一個(gè)子元素，且是E元素（4）使用方法：選擇器說明示例E:first-of-type{}父元素內(nèi)具有指定E類型的第一個(gè)元素，等價(jià)于:nth-of-type(1)p:first-child，選擇的是p元素，它屬于其父元素的首個(gè)子元素E:last-of-type{}父元素內(nèi)具有指定類型的最后一個(gè)元素。E:nth-of-type(n){}父元素內(nèi)具有指定E類型的第n個(gè)元素p:nth-child(2)，選擇的是p元素，它屬于其父元素的第二個(gè)子元素E:nth-last-of-type(n){}父元素內(nèi)具有指定E類型的倒數(shù)第n個(gè)元素E:only-of-type{}選擇父元素只包含一個(gè)同類型子元素，且該子元素匹配選擇E元素。n的取值：1、n可以是具體的一個(gè)數(shù)值，比如0、1、2、3、4、5、6、……2、n可以組成一個(gè)公式公式功能2n、even偶數(shù)2n+1、odd、2n-1奇數(shù)n+5找到從第5個(gè)往后-n+5找到前5個(gè)<!DOCTYPEhtml><html><head><style>p:nth-of-type(2){background:#ff0000;}p:nth-child(2){background:#0000ff;}</style></head><body><h1>這是標(biāo)題</h1><p>第一個(gè)段落。</p><p>第二個(gè)段落。</p><p>第三個(gè)段落。</p><p>第四個(gè)段落。</p><p>第五個(gè)段落。</p></body></html>

理解技巧：冒號(hào)前面要匹配的元素，E:nth-child(n)，是看父元素下排列在位置n的子元素。E:nth-of-type(n)，是看父元素下排列在位置n的指定類型的元素?？梢苑譃槿齻€(gè)步驟：1、找E元素的父元素；2、找位置：父元素下的子元素里，排列在位置n的

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論