C3的选择器和新增功能
一 属性选择器
标签属性分为自带属性和用户自定义属性（一般以 data- 开头）
01 li[ data-aihao ]: 选中带有自定义属性 data-aiaho 的li标签
02 li[ data-aihao *= ‘j’ ]: 属性值中包含 “j”字符
03 li[ data-aihao ^= ‘m’ ]: 属性值以 “m” 开头
04 li[ data-aihao $= ‘h’ ]: 属性值以 “h” 结尾
05 li[ data-aihao |= ‘sy’ ]: 属性值以 “sy” 开头或者等于 “sy”
属性选择器一般写在 [ ] 中用来对前面的集合进行二次过滤。
二 关系选择器
C3中新增的关系选择器和 JQ 中的极其类似，只是没有父选择器
01 p+div: 选中p 元素后面的div兄弟，且这个div必须是p元素后紧挨着的。
02 p~div: 选中P 元素后的所有兄弟 div 元素
03 div>p: 选中 div 元素下方的一级子 p 元素（ 儿子 ）
三 伪类选择器
01 :nth-child( 编号 )： 选中某一个父元素下相应编号的子元素，编号从1 开始，且该编号位置上的元素就是想查找的元素类型，如果不是则选不中。
:nth-child() 小括号里面编号可以有多种表达形式。
1 具体数值：表示第几个，编号从1开始。
2 odd : 表示编号为奇数
3 even :表示编号为偶数
4 2n ||2n+1….. : 带有n字符的表达式，n表示从0开始自然数。
02 li:nth-of-type( 编号 )： 用法和上面类似，但区别在于上面的元素排序是某一个父元素下所有子元素的编号，而该用法在排序时只在li中进行编号。
03 :nth-last-child(): 和:nth-child() 一样，只不过从后向前数
04 :nth-last-of-type() ： 同上
四 快速结构伪类
01 :first-child || :last-child 分别选中第一个和最后一个子元素，且该子元素的确存在于它父元素的第一和最后的位置上。
02 :only-child 选中的元素必须是它父元素下唯一的儿子元素
03 :only-of-type 选中的元素是它父元下该类型中唯一的该元素
04 :empty 选中父元素下为空的某子元素
05 :not( 选择器 ) 在一个集合中 过滤掉某些个元素
五 常用的结构伪类
在C3中新增了 :after 和 :before 二个伪类可以用来在一个标签的身上体现出三个”盒子”能实现的效果
Div:after{
Content:’ 必填项，即使为空 ‘
Position: absoulte; // 一般情况下让它相对于”父”盒子定位使用
}
01 在元素类型上 after before 类似于 行内元素 ，直接写宽高不起作用
02 虽然可以当做元素去用，但是它们并不是真正html标签。
六 图标字体
在CSS3中新增了 @font-face 属性可以直接通过CSS引入相应的格式的字体文件。可以利用字体制作软件生成不同格式的字体文件放在网站根目录下。然后在CSS中给该字体定义名称，需要用到的时候直接使用。
01 在一般的图标字体库中都会提供相应的CSS文件，使用时给某一个元素设置二个类名
02 基础类名 + 代码具体编号的类名
七 文字阴影
text-shadow: X轴 Y轴 羽化 颜色
01 前二个参数分别表示在水平和垂直方向阴影的偏移量，水平向右为正，垂直向下为正。
02 第三个参数值越大 阴影越模糊
03 最后一个参数用来设置阴影的颜色
04 C3中允许同时给一个元素添加多层阴影，多组之间用逗号隔开。
例 text-shadow: 1px 1px 1px red;
八 盒子阴影
box-shadow: X轴 Y轴 羽化 扩展 颜色
01 前三个参数和 text-shadow用法完全一样
02 第四个参数表示的阴影向盒子周围扩展多少距离之后再开始显示
03 在颜色的后面还可以设置第六个参数 值为 inset 表示显示一个内阴影。默认就是外阴影没有 outset 属性值
04 和文字阴影一样，也可以用逗号隔开设置多组盒子阴影
例 box-shadow: 1px 1px 1px 1px red inset;
九 圆角边框
Border-radius: 半径值
01 可以接收具体的数值做为半径，这个半径在每一个角上都由两个方向决定（ x/y ），但是一般在使用的时候默认采用二个方向值相等的做法
02 按着顺时针的方向分为 左上 右上 右下 左下 四个角
03 设置二个参数时分别表示 左上|右下 右上|左下
设置三个参数时分别表示 左上 右上|左下 右下
04 还可以设置百分比做为半径大小
十 线性渐变
Background: linear-gradient( 起始位置,开始颜色,结束颜色 )
01 第一个参数可以设置渐变起始点，形式上可以利用 to + 方向名词或者设置一个角度值（deg） ，0deg 表示的从下向上 270deg 表示从右向左，顺时针旋转；默认是180deg
02 开始颜色和结束色之间可以添加其它过渡色【 过渡色 结束位置 】，结束位置用百分比表示，做为一个参数与起始色之间用逗号隔开。
十一 径向渐变
Background:radial-gradient( )
01 第一个参数可以设置二类信息，设置渐变的形状和渐变的起始位置中间全用空格隔开，而且必须先写形状再写位置
02 ellipse X Y ： 设置形状为椭圆，必须是二个半径。
03 circle 半径值 : 设置形状为正圆，一个半径
04 at X Y : 利用 at 关键字后面设置 水平 垂直方向的位置，可以是位关键字( left right center bottom top ) 还可以是具体的数值，0 0 的位置在元素的左上角。
05 后面的参数和线性渐变一样
十二 颜色模式
background:rgba( ) 只要能用颜色表达的地方都可以用 rgba() 代替
十三 背景尺寸
Background-size:
01 通过这个属性可以对元素的背景图片进行大小的设置。
02 设置具体的数值：只写一个仅表示图片的宽，写二个表示高中间用空格隔开
03 设置百分比： 此时的计算基准值是相对于容器的宽和高来说的，而不是图片的原大小。（一个参数、二个参数规则和上面一样）
04 cover: 设置cover表示将图片缩放铺满整个容器，常用来将小图放大，所以图片有可能丢失
05 contain: 将图片缩放显示在整个容器中，常用来将大图缩小显示
在C3中可以利用 background 给一个盒子添加多张背景图片，中间用逗号隔开。
例 background:url(img/01.jpg) 0 0 no-repeat, url(img/02.jpg) 0 0 no-repeat;
十四 内减盒模型
box-sizing:border-box; .// 具有该属性的盒子，在添加border 或者 padding的时候都会从 width 身上减值
十五 过渡属性
transition: 属性 时间 形式 延时;
01 属性参数一般用 all 表示所以，也可以单一的只写某一个（width….）
02 时间参数单位是秒，表示过渡需要的时长
03 C3中提供了几种默认的过渡形式：linear ease ease-in ease-in-out ease-out
04 最后一个参数用来设置当前过渡需要延时多久之后才会执行，只要用到了数值就需要加单位 s
05 在使用的时候可以将 transition 添加在元素正常状态或者 hover 状态下
十六 C3中的2D 转换
目前浏览器对于3D的展示支持力度没有那么给力，所以研究的2D转换
在C3中不论哪种转换属性名都是 transform
位移
transform: translate( X ,Y, Z )
01 translate 属性可以设置元素相对于自身当前位置的改变。只写一个参数值仅代表X 轴 ，水平向右为正，可以为负表示向左
02 设置二个值表示 X Y 轴 但是中间用逗号隔开
03 默认情况下元素位移的参考点是相对于自身中心点发生。
缩放
transform: scale( 缩放系数 )
01 该属性改变的是元素的宽和高
02 缩放系数为正，表示将宽高变为原来的多少倍，只写一个仅表示宽度，写二个用逗号隔开分别表示宽和高。
斜切
transform:skew( 角度 )
01 设置一个角度仅表示 X 轴 ，单位是deg
02 面对屏幕从右向左看顺时针向时为正，向外为负
03 一般应用在块元素身上
旋转
transform:rotate( 角度 )
01 接收一个角度做为值，面对屏幕顺时针为正，写入的值表示转到某个度数。
02 默认情况下 rotate() 是沿着 Z 轴（屏幕45度角）做旋转
03 在JQ中可以利用事件对象下的 stopPropagation() 方法阻止当前元素身上的事件冒泡到它的父元素上。
沿着X Y轴旋转
transform: rotateX() || transform: rotateY（）
01 上面二个属性一般是用来在3D场景中使用的，但是也可以在平面内得到一些想要的效果。
02 transform-origin: 用来设置任意转换【位移，旋转，缩放，斜切】的中心点
语法上可以设置多个参数分别表示 X Y Z轴的坐标（一般只用二个）
03 rotateX rotateY 在平面里看起来就是将图片的高和宽度进行改变，正负角看起来效果好像是一样的。
十七 三维展示属性
01 backface-visibility: 设置为 hidden 定义某个元素背对屏幕的时候不显示。
02 tranform-style: preserve-3d 将当前元素定义为3D场景，此时它下面的子元素就可以做3D展示了。
03 perspective: 数值。景深，表示透视的近大小远小，常用的值为 800-1500px。
04 如果哪个元素的身上具有了 preserve-3d 属性那么一定不能在添加 overflow:hidden。(景深和3D场景属性不一定非要同时存在。)
十八 浏览器内核前缀
目前来说大部的浏览器都支持C3属性，但是C3本身的标准还没有完全制定。所以对于某一个属性浏览器厂商可以有自已独特的实现方式，但是厂商自已在实现的过程中不能”污染”标准的语法，此时厂商就可以添加上自已的浏览器内核前缀来实现具体的属性
01 -webk-: webkit内核浏览器可识别
02 -moz- : firefox
03-ms- : IE系浏览器
04 -o- : 欧朋浏览器
-ms-border-radius: 并不能让 IE6识别 border-radius 属性，因为 IE6本身就不支持C3，一般书写的顺序先写一堆带前缀的属性，再写一个标准的语法格式（ 标准语法越来越多的浏览器都在支持 ）
十九 C3动画属性
在C3中可以先定义动画然后再让某些元素去调用动画。
1 定义动画： C3中定义动画提供了两种语法格（ 单组+多组 ）无论是哪种都会用到关键字 @keyframes
单组动画：
@keyframes 自定义动画名{
from{
// 初始位置
}
to{
// 目标位置
}
例 @keyframes move { from { left:10px } to { left:200px } }
多组动画：
@keyframes 自定义动画名{
// 02 将动画分段，从0-100% 分成 N段，每段都可以定义样式
0%{ 开始位置 }
20%{ ………… }
…..
100%{ 结束位置 }
}
2 动画调用
animation: 动画名称 动画时长 动画形式 动画延时 动画次数 动画是否反向
01 动画名称可以设置：move width……..
02 动画时长：单位是秒，表示动画需要的时间，即使是0秒也必须加单位。
03 动画形式： linear ease ease-in ease-in-out ease-out….
04 动画延时：用来设置动画需要延时多久执行
05 动画次数里有一个常用 关键字 infinite 表示无穷大
06 最后一个参数动画是否反向默认是 normal 表示动画到达目标点之后不会反向，alternater 表示会反向播放
