1、CSS3 选择器
基本的选择器，例如通配符*、类选择器、ID选择器、后迭代选择器(.class Element )、子元素选择器（ul>li）、兄弟元素选择器(E + F)等。此处不多说。如果你不会一个个去百度吧。
1.1 属性选择器
E[attr]：只使用属性名，但没有确定任何属性值；
E[attr="value"]：指定属性名，并指定了该属性的属性值；
E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；
E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;
1.2 伪类选择器
1）动态伪类
:hover 当用户把鼠标移动到元素上面时的效果；
:active 用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
:focus 元素成为焦点，这个经常用在表单元素上。
......
2）UI伪类
":enabled"
":disabled"
":checked"
......
以上主要还是正对formm 表单，enabled 表示 input[type="text"]可输入。disabled 则相反。#）
3） :nth选择器
nth 才是我想说的重点。
:first-child 选择某个元素的第一个子元素；
:last-child 选择某个元素的最后一个子元素；
:nth-child() 选择某个元素的一个或多个特定的子元素；
:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
======以上四个我经常用======
:nth-of-type() 选择指定的元素；
:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
:first-of-type 选择一个上级元素下的第一个同类子元素；
:last-of-type 选择一个上级元素的最后一个同类子元素；
:only-child 选择的元素是它的父元素的唯一一个了元素；
:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty 选择的元素里面没有任何内容。
2、CSS3 动画
要创建CSS3动画，你将不得不了解@keyframes规则.
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式
/**动画*/
@keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
.yj:hover{
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
behavior: url(ie-css3.htc);
}
只要把鼠标放到.yj的类的元素上，那么该元素就会有一个变色的动画（前提：兼容css3动画以及：hover伪类）
动画属性
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1.infinite 规定动画应该无限次播放。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode 规定对象动画时间之外的状态。
2.1 动画库 animate.css
animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。