知识复习整理一：
CSS3 CORE 目录清单 :
- 选择器
- 计数器
- 多列
- CSS HACK
- transform(2D/3D)
- transition
- animation
选择器
1\ 兄弟选择器
- 相邻兄弟:匹配下一个相邻元素。注:只能向下找。
语法: + 作为结合符
selector1 + selector2
- 通用兄弟选择器:匹配某元素后面[所有的]兄弟元素。
语法: ~ 作为结合符
selector1 + selector2
2\ 属性选择器
**将元素所附带的属性及值用于选择器中**
语法: []
e.g.: element[value = xx];
element[id];
[attr];
element[id][title];
结合选择符 ^ ~ $ *
element[id^=fun] //匹配所有element中带有id前缀为fun的元素
element[id$=fun] //匹配所有element中带有id后缀为fun的元素
element[class~=fun] //匹配所有element内class属性中含有fun单词的元素
element[id*=fun] //匹配所有element内id属性中含有fun字符的元素
3\ 伪类选择器
- 链接伪类
- selector:link
选择所有未被访问的链接元素。
- selector:visited
选择所有已被访问的链接元素。
- 动态伪类(当某一活动事件发生时，触发并修改元素样式)
- selector:hover
当鼠标悬浮在该元素上时，触发该选择器
- selector:active
当鼠标点击该元素时，触发选择器
- selector:focus
当焦点在该元素上时，触发。e.g. : input在填写过程中就会触发其效果
- 目标伪类(修改被触发的html锚点元素的样式)
- selector:target
当锚点元素被触发时，修改锚点样式
- 元素状态伪类
- selector:enabled
- selector:disabled
- selector:checked
- 结构伪类
- selector:first-child 匹配属于其父元素的首个子元素
- selector:last-child 匹配属于其父元素的最后一个子元素
- selector:nth-child(n) 匹配属于其父元素的第n个子元素
- selector:only-child 匹配属于其父元素的唯一子元素
- selector:empty(n) 匹配没有子元素(子节点)的每个元素
- 否定伪类
- selector1:not(selector2) 排除指定元素中包含指定选择器的元素
e.g． : a:not(#xx) 选择a中没有id=xx的元素
- 伪元素选择器
**注意**：在CSS2中，并没有严格规定只能使用 :: 如果为了兼容性，可以全部使用:
: 一般只用于伪类选择器
:: 一般只用于 伪元素选择器
- :before / ::before 匹配元素内容区域的前端
- :after / ::after 匹配元素内容区域的后端
!!!内容生成:
配合 :before/:after 使用可以向指定区域添加新内容
e.g.: div:before{ content:"" }
可以添加字符串，url，图片路径，计数器
计数器
1\ 作用
可以生成规律的序号、数字，配合内容生成，产生自动序号
2\ 函数
- counter-reset 属性
初始化一个计数器
语法: counter-reset:name [value];
注意：初始值可以省略，默认为0;
初始值可以为负数;
可以同时初始化多个计数器: ==> counter-reset:name1 value1 name2 value2;
使用时，最好放在使用元素的父元素上声明。 ==> scope!
- counter-increment
设置每次的增量，默认为1;
语法： counter-increment:name [value] ...;
注意： 可以同时对多个计数器进行修改增量操作。
可以递增也可以递减
谁用计数器谁设置这个属性
- counter(name) 函数
作为属性值出现在 content属性中
配合伪元素选择器一起使用
多列
1\ 属性
- column-count:n 将指定元素分割成n列
- column-gap:n px 列的间距为n px
- column-rule:1px solid #ddd 列之间的边框 宽度 样式 色彩
2\ 兼容性问题：
IE10以上及opera原生支持
safari及chrome 需要前缀 -webkit-
firefox需要-moz-
CSS HACK(经久不变，除非市场能彻底淘汰IE系列产品..)
1\ 类内部HACK
通过增加属性的前缀 或者 值的后缀来解决(ps:就不献丑了，写几个自己在用的就好了..)
*: IE7 前缀
-: IE6 前缀
\0: IE8 后缀
\9\0: IE9 IE10 后缀
-webkit-: chrome/safari 前缀
-moz- : firefox 前缀
-o- : Opera 前缀
-ms- : 微软前缀。。
2\ 选择器前缀
*selector: IE6
*+selector: IE7
3\ HTML头部使用条件注释
<!--[if IE]>
<link href="forie.css" rely="stylesheet">
<![endif]-->
gt: 大于
lt: 小于
gte: 大于等于
lte: 小于等于
1\ transform ==> 为实现css3 动画与transition 而服务
浏览器前缀:
-webkit-transform:
-o-transform:
-moz-transform:
-ms-transform:
取值：
none:默认值
transform-function:一组转换函数
transform:函数1() 函数2()....;
PS：想要既旋转又位移只能多个函数放在一个transform里。要先位移再转比较舒服-。-
先执行前面 后执行后面。
包括的2D常用函数有:
- translate(x,y) ==> 位移，不需要指定中轴点
- rotate(deg) ==> 可以指定中轴点
- scale(x,y) ==> 1代表100%，可以指定缩放的原点
- skew(xdeg,ydeg)==> 可以指定倾斜的原点
2\ 转换的原点：
在不指定原点的前提下，默认原点为元素的中心处
属性：transform-origin
取值：数值/百分比/关键字
一个值：所有轴位置
两个值：x、y轴
三个值：x、y、z轴
3\ 高级点的内容 3D转换
- 要先为父容器设定视点距离 ==> perspective:n; //注意：所有的3D转换函数都必须要配合“视点”的使用。Perspective属性必须放在执行3D转换的元素的父元素身上；单位是px——指人的眼睛距屏幕的距离。同一个3D转换，若视点越近，转换效果越夸张。
- 再通过选择器对元素进行变形 ==> transform:变形函数;
- 3D旋转 ==> rotateX(deg)单杠 rotateY(deg)钢管舞 rotateZ(deg)
- 3D位移函数 ==> translateZ(z) 与缩放类似
- 3D缩放 ==> transform: scaleZ(1.5) rotateX(45deg); //需要配合才行
transition(过渡/渐变)
用户指定开始与结束的状态，然后CSS自动补全变化过程，在CSS3中transition可以制作小的图标动画效果
语法：
selector{
属性 时间 速度曲线 推迟时间
transition: property duration timing-function delay;
}
注意：部分CSS属性无法实现渐变，background-image & font-family and so on...
触发过渡的事件可以是JavaScript 也可以是 伪类选择器 如:hover :active 等 只要改变了设定的属性值，就会触发transition的动效
就现在的兼容性而言，移动端更建议使用transform + opacity 来做过渡动画
关键帧(keyframe)动画
提供一个动画中若干个关键时间点的样式属性，每相邻的两个点中间的过渡效果由CSS补充————但是关键帧动画比Transition动画多了很多关键点。
语法：
//定义关键帧动画
@keyframes animateName{
0%{
prop:value;...
}
xx%{
prop:value;...
}
100%{
prop:value;..
}
}
//使用关键帧动画
selector{
animation: name duration [timing-function delay...];
}
对比transition与keyframes
1\ transition 动画简单，只能指定两个时间点(开始，结束)
keyframes 动画复杂，可以指定多个时间点
2\ transition 兼容性支持较好
keyframes 在不同浏览器中需要加内核前缀 如: -webkit- / -moz-
3\ transition 动画触发一次只能执行一次
keyframes 触发一次可以反复执行多次，还可以指定执行的方向