15 CSS3
15.1 CSS3和CSS2之间的区别
css3 = css2 + 新语法 + 新的属性
就是对css2进行扩充 删减 优化
15.2 结构伪类
案例一：结构伪类
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>结构伪类</title><style type="text/css">css">/*使用CSS3中的结构伪类选择器来匹配元素*//*匹配第一个孩子 格式：E:first-chid*/.box ul li:first-child{color: #f00;width: 100px;height: 30px;line-height: 30px;border: 1px solid #000;}/*匹配最后一个孩子 格式：E:last-chid*/
/* .box ul li:last-child{color: #f00;width: 100px;height: 30px;line-height: 30px;border: 1px solid #000;}*//*匹配第n个孩子 格式：E:nth-chid(n)*/
/* .box ul li:nth-child(5){color: pink;width: 100px;height: 40px;line-height: 40px;border: 1px solid skyblue;}*//*匹配偶数个孩子 格式：E:nth-chid(2n) 或者 E:nth-chid(even)*/
/* .box ul li:nth-child(even){color: #f00;width: 100px;height: 30px;line-height: 30px;border: 1px solid #000;}*//*匹配奇数个孩子 格式：E:nth-chid(2n+1) 或者 E:nth-chid(odd)*/
/* .box ul li:nth-child(odd){color: #f00;width: 100px;height: 30px;line-height: 30px;border: 1px solid #000;}*//*匹配有且只有一个孩子 格式 E:only-child*/
/* div ul li:only-child{color: #f00;}*/</style>
</head>
<body><div class="box"><ul><li>黑马程序员1</li><li>黑马程序员2</li><li>黑马程序员3</li><li>黑马程序员4</li><li>黑马程序员5</li><li>黑马程序员6</li><li>黑马程序员7</li><li>黑马程序员8</li><li>黑马程序员9</li><li>黑马程序员10</li></ul></div><div><ul><li>我是90后</li></ul></div>
</body>
</html>
匹配第一个孩子first-child 或 nth-child(1)
案例二：使用CSS3中的结构伪类选择器来实现隔行变色的表格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用CSS3中的结构伪类选择器来实现隔行变色的表格</title><style type="text/css">css">table tr:nth-child(even){background-color: #f00;}table tr:nth-child(odd){background-color: #00f;}/*当鼠标hover到tr上面的时候显示背景颜色#ccc*/table tr:hover{background-color: #ccc;}</style>
</head>
<body><table width="500" border="1" align="center"><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr></table>
</body>
</html>
通过匹配奇数和偶数设置颜色来的
15.3 border-collapse
这个属性主要是用来合并表格的边框线。
border-collapse:collapse;
案例：合并表格的边框线
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>合并表格的边框线</title><style type="text/css">css">table{/*合并表格的边框线。*/border-collapse: collapse;/*给边框设置颜色*/border-color: #ccc;}table tr:nth-child(even){background-color: #f00;}table tr:nth-child(odd){background-color: #00f;}/*当鼠标hover到tr上面的时候显示背景颜色#ccc*/table tr:hover{background-color: #ccc;}</style>
</head>
<body><table width="600" border="1" align="center"><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr></table>
</body>
</html>
加了border-collapse: collapse; 表格的高度变小了，看起来把中间线的样式变了
15.4 伪元素
选择器 功能
:first-letter 操作当前元素中第一个字
:first-line 操作当前元素中第一行
:before 在之前插入，在一个盒子内部的最前面
:after 在之后插入，在一个盒子内部的最后面
案例：first-letter
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>first-letter</title><style type="text/css">css">.box{width: 40%;margin: 100px auto;border: 1px solid #444;color: #333;}.box:first-letter{/*操作当前元素中的第一个字*/color: #f00;font-size: 40px;padding: 20px;/*border:1px solid #00f;*/}.box:first-line{/*操作当前元素中的第一行*/color: #00f;font-weight: bold;}.box:before{/*要在当前元素的最前面插入文字 必须将文字放上在content中*/content:"黑马程序员";}.box:after{/*要在当前元素的最前面插入文字 必须将文字放上在content中*/content:"hello";}</style>
</head>
<body><div class="box">湖南湘潭，网传高考结束时，湘潭县教育局局长彭光宇亲自驾驶飞机在考点上空翱翔，祝贺考生一飞冲天。众多网友表示大受震撼，也有部分网友提出疑问：此次飞行的费用谁出？教育局长开飞机安全如何保障？6月10日，记者致电湘潭县教育局，工作人员表示，彭局长曾是服役于空军的飞行员，当天两架飞机飞了几个考点，预祝同学们取得好成绩，青云直上。随后，记者又致电山河通航，工作人员表示，彭局长和公司总经理是战友，这次飞行是友情赞助的，没有收费。教练机可以坐两个人，真正驾驶的其实是公司的专业飞行员。本次飞行一是祝福考生，二是宣传当地的飞行员特色教育。6月9日，湖南湘潭，网传高考结束时，湘潭县教育局局长彭光宇亲自驾驶飞机在考点上空翱翔，祝贺考生一飞冲天。众多网友表示大受震撼，也有部分网友提出疑问：此次飞行的费用谁出？教育局长开飞机安全如何保障？6月10日，记者致电湘潭县教育局，工作人员表示，彭局长曾是服役于空军的飞行员，当天两架飞机飞了几个考点，预祝同学们取得好成绩，青云直上。随后，记者又致电山河通航，工作人员表示，彭局长和公司总经理是战友，这次飞行是友情赞助的，没有收费。教练机可以坐两个人，真正驾驶的其实是公司的专业飞行员。本次飞行一是祝福考生，二是宣传当地的飞行员特色教育。</div>
</body>
</html>
