第二天对CSS的学习
一、关系选择符 （四种）
例：
1 <div class="father"> 2 <div class="son1"> 3 <a href="#">son1</a> 4 <div class="grandson"> 5 <a href="#">grandson</a> 6 </div> 7 </div> 8 <div class="son2">son2</div> 9 <div class="son3">son3</div> 10 </div>
类别及解析：
/* 包含选择符 */
.son1 a{color:red;}
选择所有被E元素包含的F元素。意思是选择所有被div中son1类元素包含的所有a标签，上面的结果为son1和grandson这两个a标签字体都为红色。
/* 子选择符 */
.son1>a{color:red;}
选择所有作为E元素的子元素F。意思是.son1说包含的子元素，上面结果为只有son1的a标签字体变红色，而grandson中的a标签字体不变。
/* 相邻选择符 */
.son1+div{color:green;}
选择紧贴在E元素之后F元素。即son2这个div中的字体变成绿色。
/* 兄弟选择符*/
.son1~div{color:yellow;}
选择E元素所有兄弟元素F。即son2和son3这两个div中的字体都变成黄色。
完全实例：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .nav>li{ 8 list-style: none; 9 } 10 /*.nav li{ 11 list-style: none; 12 } 13 */ 14 h3+small{ 15 color: red; 16 } 17 /* h3~small{ 18 color: red; 19 } 20 */ 21 /*上面的注释可以一一去掉，分别测试效果*/ 22 </style> 23 } 24 </head> 25 <body> 26 27 <ul class="nav"> 28 <li> 29 <a href="">菜单项1</a> 30 <ul> 31 <li>AAA</li> 32 <li>BBB</li> 33 <li>CCC</li> 34 </ul> 35 </li> 36 <li><a href="">菜单项2</a> 37 <ul> 38 <li>AAA</li> 39 <li>BBB</li> 40 <li>CCC</li> 41 </ul> 42 </li> 43 <li><a href="">菜单项3</a></li> 44 <li><a href="">菜单项4</a></li> 45 <li><a href="">菜单项5</a></li> 46 </ul> 47 48 <h3>这是h3标题</h3> 49 <small>这是小标题</small> 50 <p>这是内容</p> 51 <p>这是内容</p> 52 <h3>这是h3标题</h3> 53 <small>这是小标题</small> 54 <p>这是内容</p> 55 <p>这是内容</p> 56 <div> 57 <small>这是小标题</small> 58 </div> 59 </body> 60 </html>
二、id 及 class 选择符
id 及 class 均是css 提供由用户自定义标签名称的选择符，用户可以使用选择符id及class 来对页面中的xhtml标签进行自定义名称，从而达到扩展xhtml标签及组合html标签的目的。
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
例： id 选择符
1 <p id="p1"> 这是一个段落 </p> 2 #p1 { 3 font-size:12px; 4 font-weight:bold; 5 }
例： class 选择符
1 <p class="p1"> 这是一个段落 </p> 2 .p1 { 3 font-size:12px; 4 font-weight:bold; 5 }
在网页中，每个id名称中只能使用一次，不得重复。
与id 不同，class 允许重复使用。比如页面中的多个元素，都可以使用同一个样式定义。
完全实例：如上所说，id建议使用唯一，相当于人的身份证。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 #myh2{ 8 color: red; 9 } 10 .clh2{ 11 color: blue; 12 } 13 </style> 14 15 </head> 16 <body> 17 <h2 class="clh2">我是h2标题</h2> 18 <h2 id="myh2">我是h2标题</h2> 19 <h2 class="clh2">我是h2标题</h2> 20 </body> 21 </html>
三、伪类选择符
例子以及解析：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 a:link{ 8 text-decoration: none; 9 color: black; 10 } 11 a:visited{ 12 color: #ccc; 13 } 14 a:active{ 15 color: red; 16 background-color: yellow; 17 }/*此处个人尝试到要把下面a:hover及内容去掉才能看到效果*/ 18 a:hover{ 19 background-color: orange; 20 color: white; 21 } 22 input:focus{ 23 outline: 1px solid red; 24 } 25 </style> 26 </head> 27 <body> 28 <a href="#">我是a标签</a> 29 <form action="" method=""> 30 <input type="search" autofocus> 31 </form> 32 </body> 33 </html>
解析：a:link表示未被访问前的样式；a:visited表示已被访问后的样式；a:hover表示鼠标悬停时的样式；a:active设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。Input:focus设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。
接着实例 :
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 #list li{ 8 border-bottom: 1px solid #ccc; 9 } 10 #list li:first-child{ 11 color: blue; 12 } 13 #list li:last-child{ 14 border-bottom: none; 15 } 16 #list li:nth-child(3){ 17 background-color: orange; 18 } 19 </style> 20 </head> 21 <body> 22 <ul id="list"> 23 <li>我是列表1</li> 24 <li>我是列表2</li> 25 <li>我是列表3</li> 26 <li>我是列表4</li> 27 <li>我是列表5</li> 28 </ul> 29 </body> 30 </html>
E:first-child匹配父元素的第一个子元素E。E:last-child匹配父元素的最后一个子元素E。
E:nth-child(n) 匹配父元素的第n个子元素E。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 a{ 8 font-size: 16px; 9 color: #000; 10 font-family: "微软雅黑"; 11 text-decoration:none; 12 } 13 a:target{ 14 color:red; 15 } 16 </style> 17 18 </head> 19 <body> 20 <a href="#nav1" id="nav1">导航1</a> 21 <a href="#nav2" id="nav2">导航2</a> 22 <a href="#nav3" id="nav3">导航3</a> 23 </body> 24 </html>
E:target匹配相关URL指向的E元素。这个挺好的，再按了a便签后有一个样式表现，可以知道自己点击了那一页的内容等等。
