前端学习之CSS3新特性

一.属性选择器

选择符	说明
E[attr]	选择具有attr属性的E元素
E[attr="val"]	选择具有attr属性且属性值为val的E元素
E[attr^="val"]	选择具有attr属性且属性值以val开头的E元素
E[attr$="val"]	选择具有attr属性且属性值以val结尾的E元素
E[attr*="val"]	选择具有attr属性且值中含有val的E元素

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

二.结构伪类选择器

根据文本结构选择元素，常用于根据父元素选择子元素

选择符	说明
E:first-child	选择第一个子元素E
E:last-child	选择最后一个子元素E
E:nth-child(n)	选择第n个子元素E
E:first-of-type	选择第一个子元素E
E:last-of-type	选择最后一个子元素E
E:nth-of-type(n)	选择第n个子元素E

nth-child(n)和nth-of-type(n)的括号中n可以是数字，关键字，公式

1. 数字：0,1,2,3......

2. 关键字：even(偶数)，odd(奇数)

3. 常用公式：n,2n,2n+1,n+3,n-3(前面三个子元素)

注意：nth-child(n)和nth-of-type(n)的区别：

1. nth-child(n)是先给所有子元素排序，再根据n找到子元素，跟E进行匹配

2. nth-of-type(n)是先根据E给指定子元素进行排序，再根据n找到子元素

三.伪元素选择器(重点)

伪元素选择器通过Css创建元素，简化Html结构

选择符	说明
E::before	在元素内部的前面插入内容
E::after	在元素内部的后面插入内容

注意：

1.伪元素选择器会创建一个元素，属于行内元素

2.before和after必须具有content属性

3.伪元素选择器权重是1

四.盒子模型

通过box-sizing指定盒子计算大小的方式：border-box,content-box

可以分为俩种情况：

1. box-sizing:border-box 盒子宽度为width+border+padding

2. box-sizing:content-box 盒子宽度为width

五.图像模糊处理

filter属性将图片模糊和偏移效果应用于元素

filter: blur(参数) 参数值越大图像越模糊

六.calc函数

calc()会在声明属性值时做一些计算

例如：width:calc(100%-30px):子盒子比父盒子永远小30px

七.过渡(重点)

transiton:变化属性 花费时间 运动曲线 何时开始;

变化属性:元素变化的属性,可以为all，即所有属性都变化

花费时间:变化开始到结束所需时间

运动曲线:运动变化过程，默认为ease(匀速)

何时开始:鼠标点上去到开始变化的时间(延迟时间)