CSS3 的新特性
- 新增的CSS3特性有兼容性问题，ie9+才支持
- 移动端支持优于PC端
1.CSS3 新增选择器
（1）属性选择器
属性选择器可以根据元素特定属性来选择元素。这样就可以不要借助于类或者 id 选择器。
注意：类选择器、属性选择器、为类选择器，权重为10
（2）结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素，常用于根据父类选择器里面的子元素
nth-child(n)选择某个父元素的一个或多个特定的子元素
- n可以是数字，关键字和公式
- n如果是数字，就是选择第n个子元素，里面数字从1开始......
- n可以是关键字：even偶数，odd奇数
- n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
区别：
nth-child对父元素里面所有孩子排序选择(序号是固定的）先找到第n个孩子，然后看看是否和E匹配nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子
小结：
- 结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子- 关于nth-child ( n )我们要知道n是从О开始计算的，要记住常用的公式
- 如果是无序列表，我们肯定用nth-child更多
- 类选择器、属性选择器、伪类选择器，权重为10。
（3）伪元素选择器
伪元素选择器可以帮助我们利用CSS 创建新标签元素，而不需要HTML 标签，从而简化HTML标签。
注意：
before和after创建一个元素，但是属于行内元素- 新创建的这个元素在文档树中是找不到的，所以我们称为
伪元素 语法: elementbefore { }- before和after必须有
content属性 - before在父元素内容的前面创建元素，after在父元素内容的后面插入元
伪元素选择器和标签选择器一样，权重为1
语法：
/*CSS3 语法*/
element::before{ 样式}
/*（单冒号）CSS2 过时语法（仅用来支持IE8）*/
element:before{ 样式}
/*在每一个p元素前插入内容*/
p::before{ content:"hello world !";}
CSS3 引入::before 是为了将伪类和伪元素区分开来。浏览器也接受由CSS2引入人的 :before 写法。
伪元素清除浮动
1.额外标签法也称为隔墙去，是W3C推荐的做法。
2.父级添加overflow属性
3.父级添加after伪元素
4.父级添加双伪元素
额外标签法也称为隔墙去，是W3C推荐的做法。
*注意：要求这个新的空标签必须是块级元素。
后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。
2.CSS3 盒子模型
CSS3中可以通过box-sizing来指定盒模型，有2个值:即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况︰
- box-sizing:content-box 盒子大小为 width + padding + border (以前默认的)
- box-sizing: border-box 盒子大小为 width
如果盒子模型我们改为了 box-sizing: border-box，那 padding 和 border 就不会撑大盒子了(前提padding和border不会超过width宽度)
3.CSS其他特性——图片变模糊
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
filter: 函数(); 例如∶ filter: blur(5px); blur模糊处理数值越大越模糊
4.CSS其他特性——calc 函数
calc()此CSS函数让你在声明CSS属性值时执行一些计算。
width: calc(100% - 80px);
括号里面可以使用 + - * / 来进行计算。
5.CSS3 过渡
过渡( transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash 动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画︰是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持( ie9以下版本）但是不会影响页面布局。
我们现在经常和:hover一起搭配使用。
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
1.属性︰想要变化的css属性，宽度高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡，写一个 all 就可以。
2.花费时间:单位是 秒 (必须写单位）比如 0.5s
3.运动曲线︰默认是 ease (可以省略)
4.何时开始︰单位是 秒 (必须写单位) 可以设置延迟触发时间 默认是 0s (可以省略)
过渡使用的口诀：谁做过渡给谁加
