css关系选择器课件_第1页
css关系选择器课件_第2页
css关系选择器课件_第3页
css关系选择器课件_第4页
css关系选择器课件_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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>这是一个标题</h3><p>这是一个文字段落</p><p>这是一个文字段落</p><h3>这是一个标题</h3><p>这是一个文字段落</p><h3>这是一个标题</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>这是一个标题</h3><p>这是一个文字段落</p><p>这是一个文字段落</p><h3>这是一个标题</h3><p>这是一个文字段落</p><h3>这是一个标题</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="?">列表项目1</a><ul><li><a href="?">项目列表1.1</a></li><li><a href="?">项目列表1.2</a></li></ul></li><li><a href="?">列表项目2</a><

7、;ul><li><a href="?">项目列表2.1</a></li><li><a href="?">项目列表2.2</a></li></ul></li><li><a href="?">列表项目</a></li><li><a href="?">列表项目</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>列表项目</li><li>列表项目</li><li>列表项目</li><li>列表项目</li></ul></body></html>5 关系选择符<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title&g

10、t;Relationship Selectors index</title><meta name="Description" content="CSS关系选择符" /><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>关系选择符</li></ul></header><section id="bd"><section id="relationship-listing" class="gmodule gattr"><h2 class="tit">关系选择符 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="?">内部链接</a></li><li><a href="?" class="external">外部链接</a></li><li><a href="?">内部链接</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="?">内部链接</a></li><li><a href="?" class="external">外部链接</a>

22、</li><li><a href="?">内部链接</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">内部链接</a></li><li><a href="?" class="external txt">外部链接</a></li><li><a href="?" class="txt">内部链接</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">列表项目</li><li class="acb">列表项目</li><li class="bac">列表项目</li><li class="bca">列表项目</li&

27、gt;<li class="cab">列表项目</li><li class="cba">列表项目</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结尾的字符串的E元素。 语法：Eatt$="val" sRules -><style>body background-color: deepskyblue;liclass$="a" color: #f00;</style></head><body><ul><li class="abc">列表项目</li><li class=&quo

29、t;acb">列表项目</li><li class="bac">列表项目</li><li class="bca">列表项目</li><li class="cab">列表项目</li><li class="cba">列表项目</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">列表项目</li><li class="acb">列表项目</li><li class="bac">列表项目</li><li class="bca">列表项目</li><li class="cab">列表项目</li><li class="

32、;cba">列表项目</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">列表项目</li><li class="test2-abc">列表项目</li><l

34、i class="test3-abc">列表项目</li><li class="test4-abc">列表项目</li><li class="test5-abc">列表项目</li><li class="test6-abc">列表项目</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. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论