CSS3选择器
·*通配选择器
·E标签选择器
·E#id ID选择器
·E.class类选择器
·Ｅ Ｆ包含选择器，后代选择器
·Ｅ＞Ｆ子包含选择器
·Ｅ＋Ｆ相邻兄弟选择器
·Ｅ【ｆｏｏ】属性选择器
·并集选择器
属性选择器
E[att] { sRules }:选择具有att属性的E元素。
E[att="val"] { sRules }:选择具有att属性且属性值等于val的E元素。
E[att~="val"] { sRules }:选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。
E[att^="val"] { sRules }:选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$="val"] { sRules }:选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*="val"] { sRules }:选择具有att属性且属性值为包含val的字符串的E元素。
E[att|="val"] { sRules }:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。
img**[alt$="3"]**{
margin: 20px;
}
` div**[class~="a"]**
{
border: 2px solid red;
}
CSS3结构伪类选择器
-----------
E：nth-child(n)选择所有在其父元素中第n个位置的匹配E的子元素
E:nth-last-child(n) { sRules }:匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。
E:nth-of-type(n) { sRules }:匹配同类型中的第n个同级兄弟元素E。
E:first-child { sRules }:匹配父元素的第一个子元素E。
E:last-child { sRules }:匹配父元素的最后一个子元素E。
```示例代码：
li:nth-child(4n){
color: red;
}
li:nth-last-child(2){
color: blue;
}
p:nth-of-type(2){
color: orange;
}
p:nth-last-child(2){
color: yellow;
CSS3UI状态伪类选择器
E：emabled:匹配用户界面上处于可用状态的元素E。
E:disabled:匹配用户界面上处于禁用状态的元素E。
E:checked:匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
CSS3其他选择器
E~F
E：not(s)
input:checked > span{
color: red;
}
input[type="text"]:enabled{
border: 2px solid blueviolet;
background-color: yellow;
color: aqua;
}
input[type="text"]:disabled{
border: 2px solid blueviolet;
background-color: yellow;
color: aqua;
}
CSS3属性前缀
chrome、Safar:-webkit-
Opera:-o-
Firefox:-moz-
Internet Explorer:-ms-
background-color: orange;
/*针对谷歌和苹果浏览器*/
-webkit-border-radius: 50px;
/*针对欧朋浏览器*/
-o-border-radius:20px;
/*针对火狐浏览器*/
-moz-border-radius:20px ;
/*针对IE浏览器*/
-ms-border-radius:50px;
**CSS长度单位**
=======
EM:与元素字号挂钩
Rem:与根元素的字号挂钩
Px:像素、与分辨率挂钩
%：
注意：CSS3引入了一些新的尺寸单位，重点推荐的rem（根em），和em和百分比不同的是它不是与父元素挂钩，而是和文档的根元素（html）挂钩。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
我们在之前的web设计中大量使用了px进行布局，因为早期固定布局使用px较为方便，逐渐养成了这种习惯。
而使用em单位其实更加灵活，，尤其是在修改样式时，只需要修改一下挂钩元素的哪个大小即可，无须修改每一个元素。
默认挂钩元素为父元素。
网页默认字号大小为16px
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
EM特点
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
px：为像素单位。它是显示屏上显示的每一个小点，为显示的 最小单位。它是一个绝对尺寸单位；
em：它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
%： 百分比，它是一个更纯粹的相对长度单位。它描述的是相对于父元素的百分比值。如50%，则为父元素的一半。
这里需要注意的是：em是相对于应用于当前当前元素的字体尺寸；而百分比则是相对于父元素的尺寸。
CSS3过渡效果一般是通过一些简单的CSS动作出发平滑过渡功能,比如hover,focus,active,checked等
=============================================================
CSS3通过transition属性完成过渡效果
transition-property:指定过渡使用的CSS属性
transition-duration:完成过渡的时间
transition-timing-function:指定过渡的函数
transition-delat:指定过渡开始出现的延迟时间
transform:属性值为变形函数
translate/translateX/translateY:在水平、垂直或者两个方向上平移元素
scale/scaleX/scaleY:在水平、垂直或两个方向上缩放元素
romate:旋转元素，单位deg
skew/skewX/skewY:使元素倾斜一定的角度
Transform-origion:指定变形的起点-left
top
方位词：-top/bottom/center/left/right
CSS动画
-----
@keyframes:定义一个动画
animation:在HTML元素上应用动画-->
**定义动画**
@keyframes 动画名称{
阶段1{CSS样式}
阶段2{CSS样式}
阶段3{CSS样式}
..... }
阶段：每个阶段用百分比表示，从0%到100%
起止必须设置即0%和100%或者from和to-->
animation-name:动画名称 ***必须指定
animation-Duration:动画持续时间 ***必须指定
animation-timing-function:动画速度曲线
animation-delay:动画开始的时间，延迟
animation-iteration-count:动画播放次数，默认为1.
N：播放次数。
infinite:无限次循环。
animation-direction:动画在下一个是否逆向播放，默认为normal.
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
animation-play-state：running：运动 paused： 暂停
animation-fill-mode:规定对象动画时间之外的状态
none:不改变默认行为
forwards:在动画完成后，保持最后的CSS样式
backwards:在动画完成后，回到最初的CSS样式
both:向前和向后填充的样式都被应用-->
```示例代码：
img{
150px;
animation: plane 5s ease-in-out infinite ;
}
@keyframes plane{
0%{
transform: translate(0,0);
}
20%{
transform: translate(100px,200px);
}
40%{
transform: translate(200px,300px);
}
60%{
transform: translate(300px,200px);
}
100%{
transform: translate(500px,500px);
}
}