属性选择器 权重10
E[att] 选择具有att属性的元素
E[attt="val"] 选择具有att属性且值等于val的元素
E[att^="val"] 选择具有att属性且值以val开头的元素
E[att$="val"] 选择具有att属性且值以val结尾的元素
E[att*="val"] 选择具有att属性且值包含val的元素
结构伪类选择器 权重10
E:first-child 匹配父元素的第一个子元素
E:last-child 匹配父元素的最后一个子元素
E:nth-child(n) 匹配父元素的第n个子元素,如果括号中是一个公式，n从0开始。如果是数字，n从1开始。
E:first-of-type 指定类型的第一个元素 例： div span:first-of-type 选择div中第一个类型为span的元素
E:last-of-type 指定类型的最后一个元素
E:nth-of-type(n) 指定类型的第 n个元素
伪元素选择器 权重1 content为必填属性
::before 在元素内部前面插入内容
::after 在元素内部后面插入内容
过渡
transition: 过渡效果css属性名称 时间 速度曲线 何时开始;
2D转换
transform:translate(x,y); 或 transform:translateX(n); transform:translateY(n); 移动,不会影响其他元素的位置，对行内元素无效，n为百分比时，是相对于自身的宽高来计算的。
transform:rotate(度数deg); 旋转, 正数-顺时针，负数-逆时针，默认中心点为元素的中心点。transform-origin:x y; 设置元素旋转中心点
transform:scale(x,y); 缩放，不会影响其他盒子，默认中心点为元素的中心点。transform-origin:x y; 设置元素缩放中心点
动画
1 定义动画 2 调用动画
@keyframes 动画名称 {
0% {css样式} /*动画开始*/
.... n% /*更多的动画序列*/
100% {css样式} /*动画完成*/
}
选择器 {
animation-name: 动画名称;
animation-duration:持续时间;
animation-timing-function: 速度曲线;
animation-delay:动画何时开始;
animation-iteration-count: 被播放次数;
animation-direction: 下一次播放是否逆向播放。
animation-play-state:是否正在播放或暂停。
animation-fill-mode:动画结束后的状态
}
3D转换
近大远小、物体后面不可见
perspective：视距; 透视写在被观察盒子的父元素上, 单位 px
transform:translate3d(x,y,z) 3d位移
transform:rotate3d(x,y,z,deg) ; 或 transform:rotateX(度数); transform:rotateY(度数); transform:rotateZ(度数); 3d旋转
transform-style:preserve-3d; 3d呈现,写在父元素中
浏览器私有前缀
-moz- firefox
-ms- ie
-webkit- safari/chrome
-o- opera