1 CSS3 基础认知、选择器

1、CSS3基础认知：

(1).CSS3是在CSS2基础上新增了很多强大的功能，其拆分了很多"独立模块"，迭代过程也是根据模块进行更新的 -> CSS3新模块：选择器/边框/背景/文字特效/颜色/盒模型/动画/响应式布局 -> CSS3聚集点：动画效果(其更底层，相比于js/jQuery动画效果流畅，节省性能)、响应式布局的思想；

(2).目前主流浏览器(高版本)都已经支持CSS3的大多数功能 ->CSS3向后兼容浏览器，向前兼容做了处理 ->使用前缀:ms:microsoft; moz:mozilla; o:opera; ->其也称为CSS的hack模式：不同浏览器对css解析不同，我们需要根据不同浏览器写css code,这个过程便是css hack(聚焦点：浏览器兼容性)

hack模式(聚焦点是CSS3，CSS2.0基本所有浏览器都兼容)

(3).实际开发中常使用CSS预处理器、后处理器 ->往往都是同自动化构建工具一起使用

[1].CSS预处理器：Less、Sass、Stylus、CssNext插件；前三者都是预处理语言，cssNext是插件，使用方法同Less/Sass基本相同，其是最新出现的，不是很成熟； 预处理器使用目的：提高代码编写效率(性能并没有提升[jQuery等js库的使用也是如此])

[2].CSS后处理器：autoprefixer插件、postCss；后处理器使用目的：其根据不同浏览器自动加上前缀 -> Autoprefixer插件以 Can I Use 上的“浏览器支持数据”为基础，自动处理兼容性问题；

- - ->>postCss严格意义上来说不是“css后处理器”，其是工具(js实现的css抽象语法树AST[Abstract Syntax tree],AST配合其它插件使用，然后具备某些功能)，比较典型的便是配合cssNext插件、autoPrefixer插件使用，目前postCss形成的插件也有200多个了；

- - - >>>预处理器、后处理器都是未来CSS发展方向(CSS4/5的雏形)，随着技术的发展，旧版本浏览器慢慢被淘汰，那时候就不需要处理CSS3兼容性了，也就是后处理器会被淘汰；预处理器依旧有很大的发挥空间；

(4).补充CSS比较权威的网站 ->前期学习w3cschool即可(内容不详细)，后期建议使用下述网站；

CSS参考手册：http://css.doyoe.com/

Can I use前端兼容性自查工具：https://www.caniuse.com/

2、CSS3选择器 ->相比于CSS1/2;选择器类别没增加，每类的丰富性提升 ->聚焦点：伪类、伪元素

(1).条件/属性选择器：使用场景广泛~

(2).伪类选择器 -> 建议使用first-of-type{};nth-of-type(n){};//选第几个孩子，不是索引；

[1].:root{};//使用过程 -> :root{ width:100%;height:100%;}; ->等同于 html{width:100%;height:100%};  :target{};//结合a标签使用有很nice的应用场景，例如：手风琴；                                                          li:first-child; li:nth-child(n);// li为子元素(表示所有的子元素下选取元素)；                                            CSS2.0常用 -> :link;:visited;:hover;:active;

[2].表单元素->:enabled;/:disabled;/read-only;/checked;:focus;//用于选取获得焦点的元素                  单属性:enabled;/disabled/readonly/checked

(3).伪元素选择器 ->::selection{background-color:; color;}; ::placeholder{};::first-line;/first-letter; /::before; /::after;->建议都使用双冒号； - -> 部分文档也称为"伪对象选择器"

[1].::selection{};::placeholder{};//必须使用“双冒号”，其它伪元素可只写一个(系统可识别自动补充)；

[2].::before{};::after{};//默认属性content:""; -> 其是行元素，往往转换为display:inline-block;

[3].以上伪元素若是使用多个，往往会造成部分“效果消失”~ (系统识别问题，不用深究)

3、demo: 制作手风琴(:target伪类选择器的使用)