css關(guān)系選擇器課件_第1頁
css關(guān)系選擇器課件_第2頁
css關(guān)系選擇器課件_第3頁
css關(guān)系選擇器課件_第4頁
css關(guān)系選擇器課件_第5頁
已閱讀5頁，還剩10頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

1、1 相鄰選擇符<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>相鄰選擇符 (E+F)</title><!- 描述： 選擇緊貼在E元素之后F元素。 語法：E+F sRules -><style>bodybackground-color: deepskyblue;p+p color: #f00;</style></head><body>

2、<div class="test"><h3>這是一個標(biāo)題</h3><p>這是一個文字段落</p><p>這是一個文字段落</p><h3>這是一個標(biāo)題</h3><p>這是一個文字段落</p><h3>這是一個標(biāo)題</h3><p>這是一個文字段落</p><p>這是一個文字段落</p></div></body></html>2 兄弟選擇符<!

3、DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>兄弟選擇符 (EF)</title><!- 描述： 選擇E元素后面的所有兄弟元素F。 語法：EF sRules -><style>body background-color: deepskyblue;pp color: #f00;</style></head><body><div clas

4、s="test"><h3>這是一個標(biāo)題</h3><p>這是一個文字段落</p><p>這是一個文字段落</p><h3>這是一個標(biāo)題</h3><p>這是一個文字段落</p><h3>這是一個標(biāo)題</h3><p>這是一個文字段落</p><p>這是一個文字段落</p></div></body></html>3 子選擇器<!DOCTYPE html&

5、gt;<html lang="zh-cn"><head><meta charset="utf-8" /><title>子選擇符 (E>F)</title><!- 描述： 選擇所有作為E元素的子元素F。 語法：E>F sRules -><style>bodybackground-color: deepskyblue;.test>li>a color: #f00;</style></head><body><ul

6、 class="test"><li><a href="?">列表項(xiàng)目1</a><ul><li><a href="?">項(xiàng)目列表1.1</a></li><li><a href="?">項(xiàng)目列表1.2</a></li></ul></li><li><a href="?">列表項(xiàng)目2</a><

7、;ul><li><a href="?">項(xiàng)目列表2.1</a></li><li><a href="?">項(xiàng)目列表2.2</a></li></ul></li><li><a href="?">列表項(xiàng)目</a></li><li><a href="?">列表項(xiàng)目</a></li></ul>&l

8、t;/body></html>4 包含選擇器<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>包含選擇符 (E F)</title><!- 描述： 選擇所有被E元素包含的F元素。 語法：E F sRules -><style>bodybackground-color: deepskyblue;ul li color: #f00;</style&g

9、t;</head><body><ul><li>列表項(xiàng)目</li><li>列表項(xiàng)目</li><li>列表項(xiàng)目</li><li>列表項(xiàng)目</li></ul></body></html>5 關(guān)系選擇符<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title&g

10、t;Relationship Selectors index</title><meta name="Description" content="CSS關(guān)系選擇符" /><meta name="Keywords" content="CSS Relationship Selectors,包含選擇符(E F),子選擇符(E>F),相鄰選擇符(E+F),兄弟選擇符(EF)" /><meta name="robots" content="all&q

11、uot; /><!-if lte IE 8><script src="././js/html5.js"></script><!endif-><style type="text/css">bodybackground-color: deepskyblue;</style></head><body><header id="hd"><h1 class="tit">CSS Relationship

12、Selectors</h1><ul class="info"><li>關(guān)系選擇符</li></ul></header><section id="bd"><section id="relationship-listing" class="gmodule gattr"><h2 class="tit">關(guān)系選擇符 Relationship Selectors</h2><div

13、class="cont"><table class="gdataform"><thead><tr><th>Selectors<br />選擇符</th><th>Name<br />名稱</th><th>CSS Version<br />版本</th><th>Description<br />簡介</th></tr></thead><tbody

14、><tr><td><a href="ef.htm">E F</a></th><td>包含選擇符(Descendant combinator)</td><td>CSS1</td><td>選擇所有被E元素包含的F元素。</td></tr><tr><td><a href="e-child-f.htm">E&gt;F</a></td><td&

15、gt;子選擇符(Child combinator)</td><td>CSS2</td><td>選擇所有作為E元素的子元素F。</td></tr><tr><td><a href="e-adjacent-f.htm">E+F</a></td><td>相鄰選擇符(Adjacent sibling combinator)</td><td>CSS2</td><td>選擇緊貼在E元素之后F元素。&

16、lt;/td></tr><tr><td><a href="e-brother-f.htm" class="linkcss3">EF</a></td><td>兄弟選擇符(General sibling combinator)</td><td>CSS3</td><td>選擇E元素所有兄弟元素F。</td></tr></tbody></table></div><

17、;div class="related"><p><strong class="linkcss3">這種顏色</strong> 的鏈接表示是CSS3選擇符或原選擇符被CSS3修改并賦予了新的特性</p></div></section></section></body></html>6 屬性選擇器<!DOCTYPE html><html lang="zh-cn"><head><meta

18、 charset="utf-8" /><title>屬性選擇符 Eatt</title><!-描述：選擇具有att屬性的E元素。 語法：Eatt sRules -><style>body background-color: deepskyblue;aclass color: #f00;</style></head><body><ul><li><a href="?" class="external">外部鏈接&l

19、t;/a></li><li><a href="?">內(nèi)部鏈接</a></li><li><a href="?" class="external">外部鏈接</a></li><li><a href="?">內(nèi)部鏈接</a></li></ul></body></html>7 屬性選擇符 Eatt="val"

20、<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>屬性選擇符 Eatt="val"</title><!- 描述： 選擇具有att屬性且屬性值等于val的E元素。 語法：Eatt="val" sRules -><style>bodybackground-color: deepskyblue;aclass="external

21、" color: #f00;</style></head><body><ul><li><a href="?" class="external">外部鏈接</a></li><li><a href="?">內(nèi)部鏈接</a></li><li><a href="?" class="external">外部鏈接</a>

22、</li><li><a href="?">內(nèi)部鏈接</a></li></ul></body></html>8 屬性選擇符 Eatt="val"<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>屬性選擇符 Eatt="val"</title>

23、<!- 描述： 選擇具有att屬性且屬性值為一用空格分隔的字詞列表，其中一個等于val的E元素。 語法：Eatt="val" sRules -><style>bodybackground-color: deepskyblue;aclass="external" color: #f00;</style></head><body><ul><li><a href="?" class="external txt">外部鏈接<

24、;/a></li><li><a href="?" class="txt">內(nèi)部鏈接</a></li><li><a href="?" class="external txt">外部鏈接</a></li><li><a href="?" class="txt">內(nèi)部鏈接</a></li></ul></bo

25、dy></html>9 屬性選擇符 Eatt="val"<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>屬性選擇符 Eatt="val"</title><!- 描述： 選擇具有att屬性且屬性值為以val開頭的字符串的E元素。 語法：Eatt="val" sRules -><style>bo

26、dybackground-color: deepskyblue;liclass="a" color: #f00;</style></head><body><ul><li class="abc">列表項(xiàng)目</li><li class="acb">列表項(xiàng)目</li><li class="bac">列表項(xiàng)目</li><li class="bca">列表項(xiàng)目</li&

27、gt;<li class="cab">列表項(xiàng)目</li><li class="cba">列表項(xiàng)目</li></ul></body></html>10 屬性選擇符 Eatt$="val"<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>屬性選擇符 Eatt$=&qu

28、ot;val"</title><!- 描述： 選擇具有att屬性且屬性值為以val結(jié)尾的字符串的E元素。 語法：Eatt$="val" sRules -><style>body background-color: deepskyblue;liclass$="a" color: #f00;</style></head><body><ul><li class="abc">列表項(xiàng)目</li><li class=&quo

29、t;acb">列表項(xiàng)目</li><li class="bac">列表項(xiàng)目</li><li class="bca">列表項(xiàng)目</li><li class="cab">列表項(xiàng)目</li><li class="cba">列表項(xiàng)目</li></ul></body></html>11 屬性選擇符 Eatt*="val"<!DOCTYPE ht

30、ml><html lang="zh-cn"><head><meta charset="utf-8" /><title>屬性選擇符 Eatt*="val"</title>描述：選擇具有att屬性且屬性值為包含val的字符串的E元素。 語法：Eatt*="val" sRules -><style>bodybackground-color: deepskyblue;liclass*="a" color: #f00;&l

31、t;/style></head><body><ul><li class="abc">列表項(xiàng)目</li><li class="acb">列表項(xiàng)目</li><li class="bac">列表項(xiàng)目</li><li class="bca">列表項(xiàng)目</li><li class="cab">列表項(xiàng)目</li><li class="

32、;cba">列表項(xiàng)目</li></ul></body></html>12 屬性選擇符 Eatt|="val"<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>屬性選擇符 Eatt|="val"</title><!-描述：選擇具有att屬性且屬性值為以val開頭并用連接符"-&

33、quot;分隔的字符串的E元素。 語法：Eatt|="val" sRules -><style>bodybackground-color: deepskyblue;liclass|="test3" color: #f00;</style></head><body><ul><li class="test1-abc">列表項(xiàng)目</li><li class="test2-abc">列表項(xiàng)目</li><l

34、i class="test3-abc">列表項(xiàng)目</li><li class="test4-abc">列表項(xiàng)目</li><li class="test5-abc">列表項(xiàng)目</li><li class="test6-abc">列表項(xiàng)目</li></ul></body></html>13 css屬性選擇器<!DOCTYPE html><html lang="zh-c

35、n"><head><meta charset="utf-8" /><title>Attribute Selectors index</title><meta name="Description" content="CSS屬性選擇符" /><meta name="Keywords" content="CSS Attribute Selectors,Eatt,Eatt=&quot;val&quot;,Eatt=&

36、amp;quot;val&quot;,Eatt=&quot;val&quot;,Eatt$=&quot;val&quot;,Eatt*=&quot;val&quot;,Eatt|=&quot;val&quot;" /><!- 描述： 屬性選擇器； -> <!-if lte IE 8><script src="././js/html5.js"></script><!endif-><style type="text/

37、css">body background-color: deepskyblue;</style></head><body><header id="hd"><h1 class="tit">CSS Attribute Selectors</h1><ul class="info"><li>屬性選擇符</li></ul></header><section id="bd"&

38、gt;<section id="attribute-listing" class="gmodule gattr"><h2 class="tit">屬性選擇符 Attribute Selectors</h2><div class="cont"><table class="gdataform"><thead><tr><th>Selectors<br />選擇符</th><th

39、>CSS Version<br />版本</th><th>Description<br />簡介</th></tr></thead><tbody><tr><td><a href="att.htm">Eatt</a></th><td>CSS2</td><td>選擇具有att屬性的E元素。</td></tr><tr><td><a href="att2.htm">Eatt=&quot;val&quot;</a></td><td>CSS2</td><td>選擇具有att屬性且屬性值等于val的E元素。</td></tr><tr

溫馨提示

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

評論

0/150

提交評論