权重与伪类
一. 实例演示权重的原理与计算方式
一） css用3个正整数，来表示选择器的权重 权重的表示方法如下面的实例：
1、html代码如下：
<h1>我的权重是（0，0，1）</h1><h1 class="title">我的权重是（0,1,1）</h1><h1 id="active" class="title">我的权重是（1,1,1）</h1><header class="top"><h1 class="title"><div id="active">我的权重是（1,2,3）</div></h1></header>
2、css代码如下：
1、（0,0,1）h1{color: red;}2、 (0,1,1)h1.title{color: aquamarine;}3 、（1,1,1）：h1#active.title{color: blue;}4、（1,2,3）：header.top h1.title div#active{color: red;}
3效果图如下：
二）.权重优先级提升（0,0,1）提升到（0,0,2）
1、html代码：
<body>...<h2>我的权重是（0，0，1）</h2><h2>我的权重提升到（0，0，2）</h2></body>
2、css代码：
h1{color: red;}body h1{color: blue;}
3、运行的效果对比图
三）利用权重的提升有下面的好处
1.摆脱对选择器位置的限制
2.不需要去修改html的源代码
四）权重的注意事项
1.尽量不要再html中使用id属性
2.因为权重过大，后期不利于调试
五）经典实例如下：
.col-md-6 {
height: 2em;
border: thin solid;
}要修改.col-md-6样式 发现只能去修改html源码，最后只要用最小代价去修改达到目的(只有增加一个class)：
1、html代码：
<div class="col-md-6">Header</div><div class="col-md-6 bgc">Header</div><div class="col-md-6 bgc yellow">Header</div>
2、css代码：
.col-md-6 {height: 2em;border: thin solid;}.col-md-6.bgc {color: blue;}.col-md-6.yellow {color: red;}
3、运行的效果图：
2. 实例演示结构伪类,通过位置关系匹配子元素
一） 结构伪类：用来匹配子元素，给一个起点，然后采用nth-of-type（an+b） 语法计算
1）a：系数，[0,1,2,3,...]2）n：参数，[0,1,2,3,...]3）b：偏移量，从0开始4）规则：计算出来的索引，必须是有效的（从1开始）5）伪类匹配有两种场景1.匹配个2.匹配组
1、匹配第几个实例
匹配第一个的css.list>li:nth-of-type(0n+1){background-color: aqua;}匹配第3个的css.list>li:nth-of-type(0n+3){background-color: red;}
效果图如下：
2、匹配一组是的实例
1、a=1 匹配一组全选css:.list>li:nth-of-type(1n+0){background-color: aqua;}2、匹配邻居css:.list>li:nth-of-type(1n+3){background-color: red;}3、匹配前三个css:.list>li:nth-of-type(-1n+3){background-color: red;}
效果图如下：
