1.CSS3
◆浏览器支持程度差，需要添加私有前缀，移动端支持优于pc端，因为移动端的浏览器都是最新版本的，css3也在不断改进中，应用的相对广泛。
◆实际工作中写网页要使用渐进增强原则：低版本的浏览器可以正常访问页面，高版本的浏览器访问页面用户体验更好。
◆实际工作中要考虑用户群体，遵照产品的方案，听技术的上司（最新的技术大多意味着兼容性不是很好）的安排。
2.css2中的选择器◆div {} 标签选择器
◆类名选择器
◆id选择器
◆后代选择器
◆交集选择器
◆并集选择器
◆子代选择器
◆通配符选择器
◆后一个兄弟选择器（紧跟div的p）
◆后同辈选择器
3.css3中的属性选择器
◆
表示选中页面带有class属性的div
◆
表示选中页面带有class属性并且属性值等于box的div
◆
表示选中页面带有class属性并且属性值以bo字符串开头的div
◆
表示选中页面带有class属性并且属性值以ox字符串结尾的div
◆
表示选中页面带有class属性并且属性值必须包含o字符串的div
◆
表示选中页面带有class属性并且属性值中必须包含一个box字符串的div并且要以box字符串开头，可以是独立的属性值，也可以不是完整的一条字符串，但是必须分割符号是空格。
◆
表示选中页面带有class属性并且属性值中必须包含一个box字符串并且要以box字符串开头，可以是独立的属性值，也可以不是一条完整的字符串，但是分割符号是-号。
◆金色：#daa520;4.css2中的伪类（状态伪类选择器）
◆鼠标移入时
◆正常状态下（一般用于超链接）
◆鼠标点击时
◆鼠标点击后 （一般用于超链接）
◆5.css3中的伪类-结构伪类选择器
◆选中父元素中所有的li中的第一个li
◆选中父元素中所有的li中的最后一个li
◆选中父元素中所有li中的第10个li
◆选中父元素中所有li中的奇数项(非索引)的li
◆选中父元素中所有li中的偶数项(非索引)的li
◆选中父元素中所有li中的所有的li（n从0开始，但是当n<1的时候无效，因为没有当前项为0的元素）
◆选中父元素中所有li中当前项（非索引）为2的倍数的li
◆选中父元素中所有li中当前项（非索引）为2的倍数+1的li
◆选中父元素中所有li中前五项的li（n从0开始，但是当n<1的时候无效，因为没有当前项为0的元素），因为当n为5时结果就小于1了，所以选中的就是-0+5、-1+5、-2+5、-3+5、-4+5这些结果的当前项的li，切记不能写成5-n，因为语法上是这样规定的
◆选中父元素中所有li中当前项为7的倍数的li
◆选中父元素中所有li中当前项为7的倍数-1(并不6的倍数哦，如果是6的倍数则为6n而不是7n-1)的li
◆选中父元素中所有li中的最后一个li，因为nth-last-child与nth-child正好相反，nth-last-child是从后往前选，nth-child是从前往后选。
◆选中父元素中所有li中最后五项的li，原理和上面的差不多，但是一个是从前往后，一个是从后往前，切记不能写成5-n，因为语法上是这样规定的
★使用结构伪类选择器的问题在于，它是针对父容器中子元素的实际位置(该子元素在该父容器中所有子元素中排第几，也就是第几项)，如果该父容器中的子元素的实际位置上不是你指定的元素标签，那么就找不到，结构伪类选择器是根据父元素中子元素的实际位置来找指定元素的，如果该位置上不是该标签，那么就找不到，这个问题往往很容易出错，所以计算该元素的位置时要特别准确。
★
6.css3中的伪类-新增状态伪类选择器
◆
选中内容为空的div，连空字符都没有的div，表示内容为空的状态下的div，属于空伪类
◆
选中当前被激活的一个锚点（点击锚点链接后跳转到指定位置的那个id选择器的元素），表示在被激活状态下的锚点h2标签，属于目标伪类。
◆
选中div中不是类名为box2的所有元素，属于排除伪类。
★css3中新增的状态伪类选择器（empty与not）
★css3中新增的状态伪类选择器（target）
7.css3中的伪元素
◆伪元素在css2中是没有的概念，之前都是用:，在css3中有了这个概念，为了和伪类区分开来，使用::，并且必须要有content属性，由哪个元素产生的伪元素，那个伪元素就属于这个元素的一部分，并且伪元素在该元素的内部。
◆
表示在span内部最前面添加一个伪元素，内容为字符串 前。
◆
表示在span内部最后面添加一个伪元素，内容为字符串 后。
◆
8.css3中的伪元素选择器
◆
表示选中li中的第一个字母或者汉字
◆
表示选中div中的第一行信息(会随着div的变宽变窄而选中的信息增多或减少)
◆
表示选中 你使用鼠标选中的信息的区域（可以改变你使用鼠标按下之后选中一片区域的样式，很神奇）
◆
9.使用css3来DIY：文言文首字下沉、简单日历
◆文言文首字下沉
◆简单日历
10.css3中的颜色-设置透明度的五种方式
◆opacity属性只要被继承了，就无法更改，当父容器的css样式中的opacity属性值被子容器继承了就无法更改了，子容器改不了，只能改父容器。
◆完全透明的颜色：transparent
◆RGBA： red green blue（三原色） alpha （透明度）
◆HSLA（Hue Saturation Lightness Alpha）：H 色调（色调取值范围0-360 0和360代表着纯红色，120代表着纯绿色，240代表着纯蓝色） S 饱和度（饱和度越大颜色越鲜艳，饱和度月小颜色越低沉 取值范围0%-100%） L 亮度（亮度越大越接近白色，亮度越小越接近黑色 0%-100%） A透明度 (取值范围0-1)
◆十六进制设置法：如#ffff ，第一个f表示红色、第二个f表示绿、第三个f表示蓝色、第四个f表示透明度，但是ie浏览器的兼容性是0。
★css3中的透明度设置的五种方式
11.css3 文本阴影 text-shadow：5px 5px 5px #f00;
◆文本阴影的x轴的水平位移
◆文本阴影的y轴的水平位移
◆文本阴影的模糊半径
◆文本阴影的颜色
★一个文本可以有多个阴影,使用逗号的方式将一个文本的多个阴影隔开，也就是多个阴影效果并列书写，如text-shadow：-1px -1px 5px #f00,1px 1px 5px #0f0;
12.css3使用文本阴影制作凹凸效果
13.css3盒子的box-sizing属性
◆content-box：内容盒子 （传统盒子模型，盒子大小=定义的宽高+padding+border）
◆padding-box：内填充盒子 （其实没有这个属性，这个只是定义上的概念）
◆border-box：边框盒子 （非传统盒子模型，盒子大小=数值最大的那个值）
◆当box-sizing属性的值设置为content-box（默认值）时，就是盒子的外加模式，这个时候盒子大小=定义的宽高+padding+border。
◆当box-sizing属性的值设置为border-box时，就是盒子的外减模式，这个时候盒子大小就等于真正定义的宽高的数值，这个时候定义的宽高会减小，边框和填充补上减小部分的自定义的宽高。◆可以通过box-sizing属性的border-box和content-box制作瞬间放大或者缩小效果的动画。
14..css3之浏览器兼容性解决办法-私有化前缀
◆-webkit- ：解决谷歌与苹果浏览器内核渲染的兼容性问题
◆-moz-：解决火狐浏览器内核渲染的兼容性问题
◆-ms-：解决微软浏览器内核渲染的兼容性问题
◆-o-：解决欧朋浏览器内核渲染的兼容性问题
◆什么都不加：默认的书写方式
★如果加私有化前缀也无法解决兼容性的问题，那么就是浏览器的版本实在太低了，几乎可以放弃了