选择器这一部分确实蛮重要，从css布局到jq的使用，很多细节问题决定了你工作的速度，但是啦，掌握起来又很枯燥，一堆符号，你的兄弟，我的父亲，什么祖先，上一级祖先，因此跟背单词一样，需要多加练习，并且多运用
(1)nth-chlid(n)与nth-of-type(n)
乍看上去，真的是傻傻分不清楚，但也能隐约猜到一些什么，就是后面的是跟type有关的
<style>
/*p:nth-child(2){
color: deeppink;
}*/
p:nth-of-type(2){
color: deepskyblue;
}
</style>
</head>
<body>
<div class="box">
<p>我能单杀</p>
<p>她喜欢我</p>
<p>蛮王没大招</p>
</div>
捕11111获.PNG
这两个选择器在父级只有单一对应子元素时，效果是一样的
当在box里面加了一个div，效果就发生变化了
<style>
p:nth-of-type(2){
color: deepskyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="first-son">上单盖伦大保健</div>
<p>我能单杀</p>
<p>她喜欢我</p>
<p>蛮王没大招</p>
</div>
捕2222222获.PNG
这里是直接跳过了div，从p标签开始计算
而nth-child(n)则出现了不同
<style>
p:nth-child(2){
color: deepskyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="first-son">上单盖伦大保健</div>
<p>我能单杀</p>
<p>她喜欢我</p>
<p>蛮王没大招</p>
</div>
捕3333获.PNG
归纳：对于:nth-child选择器，在简单白话文中，意味着选择一个元素如果：
1这是个段落元素
2这是父标签的第二个孩子元素
对于:nth-of-type选择器，意味着选择一个元素如果：
1选择父标签的第二个段落子元素
表格隔行变色
<style>
tr:nth-of-type(odd){
background-color: #BAB5B9;
}
/*odd 古怪的，奇数的*/
tr:nth-of-type(even){
background-color: #fff;
}
</style>
</head>
<body>
<table>
<tr>
<td>保罗</td>
<td>格里芬</td>
<td>乔丹</td>
</tr>
<tr>
<td>保罗</td>
<td>格里芬</td>
<td>乔丹</td>
</tr>
<tr>
<td>保罗</td>
<td>格里芬</td>
<td>乔丹</td>
</tr>
<tr>
<td>保罗</td>
<td>格里芬</td>
<td>乔丹</td>
</tr>
<tr>
<td>保罗</td>
<td>格里芬</td>
<td>乔丹</td>
</tr>
<tr>
<td>保罗</td>
<td>格里芬</td>
<td>乔丹</td>
</tr>
</table>
捕5555获.PNG
（2）css3新增选择器
- nth-child()
- first-child
*last-child - nth-of-type()
