开发者学堂课程【CSS 快速掌握：结构伪类】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/611/detail/9205
结构伪类
内容介绍
一、css3 与 css2 之间的区别
二、结构伪类
三、使用 css3 中的结构伪类选择器来实现隔行变色的表格
一、css3与css2之间的区别
css3=css2 新退法+新的属性
是对 css2 进行扩充 删减 优化
二、结构伪类
选择器 功能
1.E:first-child 匹配第一个孩子
2.E;last-child 匹配最后一个孩子
3.E:nth-child(n) 匹配第n个孩子
4.E:nth-child(2n)或 匹配偶数的孩子
E:nth-child(even)
5. E:nth-child(2n+1) 匹配奇数的孩子
E;nth-child(odd)
6.E:only-childo 匹配有且只有一个孩子
1.E:first-child 匹配第一个孩子
<title>结构伪类</title>
<style type="text/css">
/*使用 CSS3中的结构伪类选择器来匹配元素*/
/*匹配第一个孩子 格式:E:first-child{属性:值;};*/
.box ul li:first-child{color:#f00;width:100px;
height:30px;Line-height:30px;border:1px solid #000;}
</style>
</head>
<body>
<div class-"box">
<ul>
<li>黑马程序员1<li>
2.E;last-child 匹配最后一个孩子
/*匹配最后一个孩子：E;last-child{属性：值；}；*/
.box ul li:last-child{color:#f00;width:100px;height:30px;
Line-height:30px;border:1px solid #000;}
3.E:nth-child(n) 匹配第 n 个孩子
/*匹配第n个孩子：E:nth-child(n){属性：值；}；*/
.box ul li:nth-child(随意输入一个数){color:pink;width:100px;
height:30px;Line-height:40px;border:1px solid skyblue;}
4.E:nth-child(2n)或E:nth-child(even) 匹配偶数的孩子
/*匹配偶数的孩子：E:nth-child(n){属性：值；}或者：nth-child(even){属性：值；}*/
.box ul li:nth-child(2){color:00f;background:pink;
Width:100px;}*/
.box ul li:nth-child(even){color:f00;background:pink;
Width:100px;}*/
5.E:nth-child(2+1n)或E:nth-child(odd) 匹配偶数的孩子
/*匹配奇数的孩子：E:nth-child(2n+1){属性：值；}或者：nth-child(odd){属性：值；}*/
.box ul li:nth-child(2n+){color:0f0;Width:100px;
Background-color：skyblue；}*/
.box ul li:nth-child(odd){color:gold;Width:100px;
Background-color：skyblue；}*/
6.E:only-child 匹配有且只有一个孩子
/*匹配有且只有一个孩子:E:only-child{属性：值；}*/
Dix u1 li:only-child{color:#f00;}
三、使用 css3 中的结构伪类选择器来实现隔行变色的表格。
<style type=”text/css”>
teble tr:nth-child(even){background-color:#f00;}
table tr:nth-child(odd){background-color:#00f;
/*当鼠标移动到tr.上面的时候显示背景颜色为#ccc*/
Table tr hover{background-color: #ccc;}
</style>
</head>
<body>
<table width="500"border="1"align-"center"
<tr>
