CSS3的新特性

1.属性选择器

属性选择器可以根据元素特定属性来选择元素

注意：类选择器、属性选择器、伪类选择器，权重都是10 

2.结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素

nth-child(n)选择某个父元素的一个或多个特定的子元素

*n可以是数字、关键字和公式

*n如果是数字，就是选择第n个子元素，里面数字从1开始...

*n可以是关键字：even偶数、odd奇数

*n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略） 

*nth-child会把所有的盒子都排列序号。执行时首先看nth-child()之后回去看前面div

*nth-of-type会把指定元素的盒子排列序号。执行时首先看前面的div之后再看nth-of-type()中是第几个孩子

3.伪元素选择器    

注意：

*before和after创建一个元素，但是属于行内元素

*新创建的这个元素在文档树中是找不到的，所以称为伪元素

*语法：element::before{}

*before和after必须有content属性

*before在父元素内容的前面创建元素，after在父元素内容的后面插入元素

*伪元素选择器和标签选择器一样，权重为1

*伪元素选择器清除浮动：

4.CSS3盒子模型

1.box-sizing:content-box盒子大小为width+padding+border(默认的)

2.box-sizing:border-box盒子大小为width(padding和border不会撑大盒子了)

5.CSS3其他特性

CSS3滤镜filter：

filter:函数(); 例如：filter:blur(5px); blur模糊处理 数值越大越模糊

CSS3calc函数：

width: calc(100%-30px);

括号里面可以是+ - * /

6.CSS3过渡

transition:要过渡的属性 花费时间 运动曲线 何时开始;

1.属性：想要变化的css属性，宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以

2.花费时间：单位是秒（必须写单位）比如0.5s

3.运动曲线：默认是ease（可以省略）

4.何时开始：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）