关于css属性选择器常用的有：
id选择器（#box），选择id为box的元素
类选择器（.one），选择类名为one的所有元素
标签选择器（div），选择标签为div的所有元素
后代选择器（#box div），选择id为box元素内部所有的div元素
子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
群组选择器（div,p），选择div、p的所有元素
CSS3新增选择器
1.属性选择器（和类选择器权重一样：10）
E[att] :选择具有att属性的E元素
E[att="val"]，E[att^="val"]：以val开头，E[att$="val"]:以val结尾，E[att*="val"]值中含有val
如：input[type=text]{ color:pink; }
2.伪类选择器（和类选择器权重一样：10）
E:first-child:匹配E元素中的第一个子元素
E:last-child:匹配E元素中的最后一个子元素
E:nth-child(n) 选择某个父元素的一个或多个特定的子元素。n可以为数字，关键字(even偶数，odd奇数)和公式(公式中只有n字母，为从0开始每次加1向后计算。如3n+1是1,4,7…)
如：ul :first-child{ } 或 ul li:first-child{ }
nth-type(n) 类似，
nth-child 会把所有盒子排序
nth-of-type会将指定元素盒子排序
如：
section div:nth-child(1){ } 找的是section中第一个元素，再看这个是不是div
section div:nth-of-type(1){ } 找的是section中第一个div
伪元素选择器（和标签选择器权重一样：1）
伪元素选择器可以帮我们利用css创建新标签元素而不需要HTML标签，从而简化HTML结构
::before 在元素内部前面插入内容； ::after 在元素内部后面插入内容
before和after创建一个元素，属于行内元素。
语法：element::before{ } 其中before和after必须有 content属性
如： div::before{ content:"";} 建立一个div盒子放在父元素div里面的前面
div::after{ content:""; } 建立一个div盒子放在父元素div里面的后面
例子：在图片上添加遮罩：
.tudo{position: relative;} .tudo::before{content: "";display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3) no-repeat center;}.tudo:hover::before{display: block;}
伪元素选择器还可以用来清除浮动。
清除浮动的方法：
1.额外标签法（隔墙法）
2.父级添加overflow属性
3.父级添加after伪元素
4.父级添加双伪元素
CSS3其它特性
1.图片变模糊
filter: 函数();如：filter:blur(5px); blur模糊处理，数值越大越模糊。
2. calc函数：
calc() 声明CSS属性时执行一些计算。
.father{width: 300px;height: 200px;background-color: chartreuse;}.son{width: calc(100% - 30px); /*子盒子宽度永远比父盒子少30px*/height: 30px;background-color: chocolate; }
CSS3盒子模型
box-sizing：content-box / border-box ；
1.content-box内容盒子（W3C盒模型） content-box 是 box-sizing 的默认值，也就是说所有的盒子默认都是内容盒子，那么这里 css 属性中的 width 和 height 设置的是它内容区域的宽高，而盒子的宽高需要加上内间距和边框，外边距不算在内。
2.border-box边框盒子（IE盒模型） 盒子最终的值就是width的值。 如果把 box-sizing 的值改成 border-box，那么 width 和 height 属性就是分别设置盒子的最终宽度和高度(加上了padding和border)
css3过渡transition
过渡动画，从一个状态渐渐过渡到另一个状态（ie9以下不支持）经常和:hover一起使用。
transition: 要过渡的属性 花费时间 运动曲线 何时开始；
1.属性 ：想变化的css属性，宽高 bg色 内外边距都可。也可以 all
2.花费时间 单位为s 如 ：0.5s
3.运动曲线：默认是ease 逐渐慢下来（可以省略），linear 匀速，eare-in 加速，ease-out 减速，ease-in-out 先加速后减速
4.何时开始：单位是s 可以设置延迟触发 默认为0s（可以省略）
div{width: 300px;height: 200px;background-color: chartreuse;transition: all 0.5s; }div:hover{background-color: cyan;width: 400px;}
多个属性变化可以用逗号隔开：
transition：width 0.5s, height 1s;
CSS3 2D转换transform
移动：translate 旋转：retate 缩放：scale
translate: translateX，translateY，translate（X,Y） 元素水平(X),垂直(Y) 方向平移
transform:translate(-50%,-50%);
scale： （1）scaleX(x)：元素仅水平方向缩放（X轴缩放）；
（2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）；
（3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）；
transform:scaleX(1.6);
rotate（ ?deg）顺时针旋转?度
transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-webkit-transform:rotate(7deg); /* Safari and Chrome */
