CSS|15 CSS3结构伪类border-collapse伪元素
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">
/*使用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">
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">
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">
.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>
