css3

[b]1. 属性选择器[/b]

　　　　　　　　table{

　　　　　　　　width: 100%;
　　　　　　　　font-size: 12px;
　　　　　　　　table-layout: fixed; //这个很重要 列宽由表格宽度和列宽度设定。（每列都分配一样的宽度）
　　　　　　　　empty-cells: show;
　　　　　　　　border-collapse: collapse;
　　　　　　　　margin: 0 auto;
　　　　　　　　border: 1px solid #cad9ea;
　　　　　　　　color: #666;}

　　　　　　　　　h1[lang^="table"]{    /*匹配属性lang以table开头的*/
background: pink;
}
h1[lang$="table"]{    /*匹配属性lang以table结尾的的*/
background: pink;
}
h1[lang*="table"]{    /*匹配属性lang以table任意的*/
background: pink;
}

　　

2. 结构伪类选择器（元素过滤）

E:nth-child(n) 选择在其父元素第n个位置匹配E的子元素

E:nth-last-child(n) [b]选择在其父元素倒数n个位置匹配E的子元素[/b]

E:nth-of-type(n) 选择父元素第n个元素

[b]E:nth-last-of-type(n) 选择父元素倒数第n个元素[/b]

[b]E:last-child 位于其父元素最后一个[/b]

[b]E:first-of-type 选择在其父元素中匹配E的第一个同类型的子元素[/b]

[b]E:last-of-type 同上[/b]

E:only-child 选择其父元素包含一个子元素,且该子元素匹配E

E:only-of-type 选择其父元素包含一个同类型的子元素，且该元素匹配E

E:emply 选择匹配E的元素，且改元素不包含子节点

3.动画

div{
position: absolute;
left: 100px;
top: 100px;
width: 306px;
height: 226px;
background: pink url(images/bg.jpg) no-repeat;

-webkit-background-size: cover;    /*背景图片覆盖div*/
-o-background-size: cover;
background-size: cover;

transition:transform .5s ease-in, background .5s ease-in;
/*
动画效果 参数1 那个属性要动画（width，height，transform都可以）
参数2 时间多少秒
参数3 规定速度效果的速度曲线 （ease-in|ease-out|linear）还可以用这个
cubic-bezier(0.25,0.1,0.25,1)代替
*/
-webkit-transition: -webkit-transform .5s ease-in, background .5 ease-in;
-moz-transition: -moz-transform .5s ease-in, background .5 ease-in;  /* Firefox 4 */
-o-transition: -o-transform .5s ease-in, background .5 ease-in;  /* Opera */
}
div:hover{
/* 旋转 rotate(deg)旋转多少度  scale(n) 进行缩放  translate 移动(x,y)*/
transform: rotate(180deg) scale(2) translate(10px,10px);
-webkit-transform: rotate(180deg) scale(2);
-moz-transform: rotate(180deg) scale(2);
-o-transform: rotate(180deg) scale(2);
-ms-transform:rotate(180deg) scale(2); 	/* IE 9 */

/* background: blue; */
}

　　

body{
background: red;
}
body:hover{
/* transition-property 动画过渡css*/
background: blue;
-webkit-transition-property: background;
-moz-transition-property: background;
-o-transition-property: background;
transition-property: background;

/*过渡时间*/
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;

/*过渡延迟时间*/
-webkit-transition-delay: 2s;
-moz-transition-delay: 2s;
-o-transition-delay: 2s;
transition-delay: 2s;

/*过渡属性方法*/
-webkit-transition-timing-function:linear;
-moz-transition-timing-function:linear;
-o-transition-timing-function:linear;
transition-timing-function:linear;
}

/*3d翻滚动画案例*/
div{
margin: 0 auto;
width: 400px;
height: 300px;
background: url(images/bg.jpg) center no-repeat;
/*定义3D空间*/
-webkit-transform-style: preserve-3d;

/*设计沿X轴旋转 20s线性过渡动画 无限次播放*/
-webkit-animation-name: x-spin;
-webkit-animation-duration: 20s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;

}
@-webkit-keyframes x-spin{    /*引用x-spin动画*/
0%{                   /**/
-webkit-transform: rotatex(0deg);
}
50%{
-webkit-transform: rotateX(180deg);
}
100%{
-webkit-transform: rotateX(360deg);
}
}