1. 实例演示权重的原理与计算方式 2. 实例演示结构伪类,通过位置关系匹配子元素

1.权重：
排列顺序：ID >> CLASS >> TAG
初始是0.0.0
计算方式就是看有几个ID，几个class，几个TAG,数字按ID.CLASS.TAG顺序排列，数字越大，权重越高。ID具有唯一性。尽量不要在html中使用ID属性，ID权重过高，会导致选择器失去弹性，不利于调试会复用。
例：
1. 下面这组ID=0，class=0,tag=1
所以权重就是 0.0.1
p {
color:red;
}
2.下面这组ID=0，class=1,tag=1
权重就是 0.1.1
h1.test {
 color:green;
}
如果权重一样，比如第一个权重是0.0.1,第二个也是0.0.1，浏览器会渲染第二个的内容。
例：
h1 {
color:red;
}
h1 {
color:green;
}
浏览器中H1内容会是green,因为代码是由上而下执行的。如果想让h1内容变为上面的red,只需要给red增加权重，现在两个H1权重都是0.0.1，只要把red权重增加，比如0.0.2就可以。
2.伪类
例：
    <ul class="list">
      <li class="test1"></li>
      <li class="test2"></li>
      <li class="test3"></li>
      <li class="test4"></li>
      <li class="test5"></li>
      <li class="test6"></li>
      <li class="test7"></li>
      <li class="test8"></li>
    </ul>
起始位置： ul.list
配置第一个：
.list > li.test1{
 color:blue;
}
伪类配置
如果只是单独配置一个，下行中括号数字改成自己想改成的行数
.list > li:nth-of-type(1){
color:blue;
}
伪类语法糖：
匹配第一个：
.list > li:first-of-type{
 color:blue;
}
匹配最后一个：
.list > li:last-of-type{
color:red;
}
:nth-of-type(an + b)
 * 1. a: 系数, [0,1,2,3,...]
 * 2. n: 参数, [0,1,2,3,...]
 * 3. b: 偏移量, 从0开始
 规则: 计算出来的索引,必须是有效的(从1开始)
 匹配第一个：
 .list > li:nth-of-type(0n + 1) {
 color：red;
 }
 0xn+1  0乘以任何数都是0，.所以就是0+1=1，想要匹配第几行，就把括号内的1换成那个行数即可。由于0乘以任何数都是0，所以写的时候前面的0n+ 可以去掉不写
 匹配一组：
 全选：1n,全部行都变绿色
 .list > li:nth-of-type(1n){
 color:green;
 }
 1乘以任何数不变，所以1不用写也可以
 从第四个开始匹配：
  .list > li:nth-of-type(n + 4){
 color:green;
 }
 计算方式：
 1 x 0 + 4 = 4
 1 x 1 + 4 = 5
 1 x 2 + 4 = 6
 ......
 匹配前四个
 只需要反过来，在N前面加个减号即可
  .list > li:nth-of-type(-n + 4){
 color:green;
 }