css3

1. 属性选择器

　　　　　　　　table{

　　　　　　　　 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) 选择在其父元素倒数n个位置匹配E的子元素

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

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

E:last-child 位于其父元素最后一个

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

E:last-of-type  同上

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

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

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

3.动画

div{
			position: absolute;
			left: 100px;
			top: 100px;
			 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;
			 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);
				}
		}