目录
1. CSS3现状
2. 新增选择器
2.1 属性选择
2.2 结构伪类选择
2.3 伪元素选择器（重点）
2.3.1使用场景
3. 盒子模型
4. css3的其他特性
4.1 css3滤镜filter
4.2 calc 函数
4.3 css过渡（重点）
1. CSS3现状
新增的CSS3特性有兼容性问题，ie9+才支持移动端支持优于pc端不断改进中应用相对广泛2. 新增选择器
2.1 属性选择
根据元素特定属性来选择元素，不用借助与类或者是ID选择器
注意：类选择器、属性选择器、伪类选择器，权重为10
2.2 结构伪类选择
根据文档结构选择元素的，常用于根据父级选择器里面的子元素
nth-child(n)选择器可以选择父元素的一个或者多个特定的子元素：n 可以是数字，关键字，公式n是数字，就是选择第n个子 元素，里面从数字1开始n是关键字：even偶数，odd奇数n是公式常见的公式如下（如n是公式，从0开始计算，但是第0个元素或者超出元素的个数会被忽略）E:nth-child(n)和E:nth-of-type(n)区别：E:nth-child(n) 对父元素里面的所有孩子排序选择（序号固定），先找第几个孩子，在匹配E元素E:nth-of-type(n)对父元素里面指定子元素进行排序选择，先匹配E，再根据E找第几个孩子
2.3 伪元素选择器（重点）
利用CSS创建新标签元素，而不需要HTML标签，简化HTML结构
注意：
before和after创建一个元素，属于行内元素新创建的元素在文档数里面是找不到的，所以称为伪元素语法：element::before {}before和after必须有content属性伪元素选择器和标签选择器权重为1
2.3.1使用场景
伪元素字体图标仿土豆效果伪元素清除浮动3. 盒子模型
css3可以通过box-sizing来指定盒子类型，有两个值：conten-box、border-box，这样计算盒子的方式发生了变化。
可以分为两种情况：
box-sizing: content-box 盒子大小为width+padding+border（以前默认的）box-sizing: border-box 盒子大小为width
如果盒子模型改为box-sizing: border-box，那么padding和border就不会撑大盒子了（前提是padding和border不会超过width宽度）
4. css3的其他特性
4.1 css3滤镜filter
将模糊或者颜色偏移等图形效果应用于元素（类似马赛克原理）
filter: 函数(); 例如：filter: blue(5px); blur模糊处理 数值越大越模糊
4.2 calc 函数
calc（）函数在声明css属性值时执行一些计算
width: calc(100% - 80px);
括号可以使用+、-、*、/符号来进行计算
注意：符号前后要加空格
4.3 css过渡（重点）
过渡（transition）是css具有颠覆性的特征之一，不使用flash动画或者JavaScript的情况，发生元素变化
过渡动画：是一个从一个状态渐渐的过渡到另外一个状态。
ie9版本以下的浏览器不支持，但是不会影响页面布局
我们经常和 :hover一起搭配使用
transition：要过渡的属性 花费时间 运动曲线 何时开始；
属性：想要变化的css属性，宽度高度，背景颜色，内外边距都可以，如果想要所有哦的属性都发生变化，写一个all就可以。
花费时间：单位是秒（必须写单位）比如0.5s。
运动曲线：默认是ease（可以省略）。
何时开始：单位是秒（必须写单位）可以设置延迟触发时间，默认是0s（可以省略）。
如果想用多个属性，加个‘,’分隔开;多个属性用all
注意：给谁过渡就给谁加属性
练习（过渡条）：
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>进度条</title><style>.bar {width: 150px;height: 15px;border: 1px solid red;border-radius: 7px;padding: 1px;}.bar_in {width: 50%;height: 100%;background-color: red;border-radius: 7px;transition: all .5s;}.bar_in:hover {width: 100%;}</style></head><body><div class="bar"><div class="bar_in"></div></div></body></html>
