01-css3相关概念

渐进增强
基于低版本浏览器开发，逐步添加新功能 向前看
优雅降级
基于高版本开发，逐步兼容低版本浏览器 向后看

主流的浏览器 内核 兼容性前缀
c chrome webkit(旧)/blink(新) -webkit
s safari webkit -webkit
o 欧鹏 presto -o
ie trident -ms
ff 火狐 gecko -moz
border-radius
-webkit-border-radius
-o-border-radius
border-radius

02-兄弟选择器

css2 相邻兄弟选择器
E + F 选择紧贴在E后面的兄弟元素F
css3 普通兄弟选择器
E ~ F 选择E后面的兄弟元素F

03-属性选择器

css2
E[attr] 选择有attr属性的元素E
E[attr=’val’] 选择具有attr属性，并且属性值是val的元素E
css3
E[attr$=’val’] 选择具有attr属性，并且属性值以val结尾的元素E
E[attr^=’val’] 选择具有attr属性，并且属性值以val开头的元素E
E[attr*=’val’] 选择具有attr属性，并且属性值中有val的元素E

04-结构伪类选择器

E:nth-of-type(n) 同级中同类型的第n元素，并且这个元素是E
E:nth-child(n) 同级中第n个元素，并且这个元素是E
n 数字 表达式（2n 2n+1 3n 4n） 关键字 odd 奇数 even 偶数
E:nth-last-of-type(n) 同级中同类型的倒数第n个元素，并且这个元素是E
E:nth-last-child(n) 同级中倒数第n个元素，并且这个元素是E
E:first-of-type 同级中同类型的第一个元素，并且这个元素是E
E:nth-of-type(1)
E:first-child 同级中第一个元素，并且这个元素是E
E:nth-child(1)
E:last-of-type 同级中同类型最后一个元素，并且该元素是E
E:nth-last-of-type(1)
E:last-child 同级中最后一个元素，并且该元素是E
E:nth-last-child(1)
E:only-of-type 同级中同类型唯一一个元素，并且该元素是E
E:only-child 同级中唯一一个元素，并且该元素是E

05-结构伪类选择器/目标伪类选择器

结构伪类选择器
:root 选择根元素 html
:empty 选择空元素
目标伪类选择器
E:target 选中锚点元素，并且这个锚点处于激活状态，并且这个元素是E

06-UI状态伪类选择器

  1. E:enabled 元素处于可用状态 --- 表单控件可用<br />    E:disabled 元素处于禁用状态 --- 表单控件可用<br />    E:checked 元素处于选中状态  单选 多选

07-否定伪类选择器

E:not(val) 选中不是val选择器的元素E
例：
/
除了最后一个元素，都加上下边框
/
li:not(:last-of-type){
border-bottom: 1px solid #000;
}

08-文字阴影和盒子阴影

text-shadow: 水平偏移 垂直偏移 模糊程度 颜色
- 水平偏移 垂直偏移必须写
- 模糊程度不能写负数
- 颜色默认文字颜色
多个阴影用逗号隔开
盒子阴影
box-shadow: 水平偏移 垂直偏移 模糊距离 阴影大小 颜色 (内阴影 inset 可选)
- 水平偏移 垂直偏移必须写
- 模糊程度不能写负数
- 阴影大小默认和元素等大
- 颜色默认文字颜色
多个阴影用逗号隔开

09-圆角

  1. 圆角<br />    border-radius: <br />                一个值   四个角<br />                两个值   左上右下    右上左下<br />                三个值   左上     右上左下    右下<br />                四个值   左上   右上  右下   左下<br />    单边的圆角<br />    border-top/bottom-left/right-radius<br />    border-top-right-radius<br />    圆角写50%，参考宽高的百分比，如果想写一个正圆的圆角，圆角要写数值
  3. 椭圆<br />    单边的椭圆<br />    border-top/bottom-left/right: 水平半径 垂直半径<br />    椭圆角的综合写法<br />    border-radius: 1-4水平半径/1-4垂直半径