今天完成的事：

1、优化昨天第一个页面，样式分离，打包成几个SCSS文件；

2、写完第二个页面。正在写第三个，明天可以写完了；

3、准备小课堂素材。写了像个demo，感觉效果不太好，明天现场写吧。

明天的计划：

1、完成小课堂的讲解以及后续工作；

2、尽量写完任务14、15。早日进入JS。

遇到的困难：

1、不知道同一个轮播图中,animation会和checked冲突，会优先选择animation的属性，遵循动画的属性一直动下去，因为明天想讲小课堂，所以，网上找了很久这方面的，没有找到相应的解决办法，连原因也没说。

2、在不考录兼容性的情况下，flex相当好用。基本上能满足大部分的布局要求，能够实现类似于栅格的响应式的要求。但是，我一直有个疑问，现阶段需不需要考虑兼容性问题，或者说兼容性应该考虑到什么程度。

收获：

1、我选的小课堂课题是前两天让我头疼的轮播图，想挑战一下自己，临时改的。又写了两个新的demo,对这个现在是比较熟练了。

嗯，其实难点，一个是逻辑，一个是注意伪类选择器的层级关系。说到这个，我真的发现，CSS的选择器从来没有向上层选择的，什么父类选择器真的没见过。查了一下原因：

（答案参考来自张鑫旭大佬：http://www.zhangxinxu.com/wordpress/2016/08/css-parent-selector/）

（1）为何CSS不支持父选择器？

这个问题的答案和“为何CSS相邻兄弟选择器只支持后面的元素，而不支持前面的兄弟元素？”是一样的。

浏览器解析HTML文档，是从前往后，由外及里的。所以，我们时常会看到页面先出现头部然后主体内容再出现的加载情况。

但是，如果CSS支持了父选择器，那就必须要页面所有子元素加载完毕才能渲染HTML文档，因为所谓“父选择器”，就是后代元素影响祖先元素，如果后代元素还没加载处理，如何影响祖先元素的样式？于是，网页渲染呈现速度就会大大减慢，浏览器会出现长时间的白板。加载多少HTML就可以渲染多少HTML，在网速不是很快的时候，就显得尤为的必要。比方说你现在看的这篇文章，只要文章内容加载出来就可以了，就算后面的广告脚本阻塞了后续HTML文档的加载，我们也是可以阅读和体验。但是，如果支持父选择器，则整个文档不能有阻塞，页面的可访问性则要大大降低。

有人可能会说，要不采取加载到哪里就渲染到哪里的策略？这样子问题更大，因为会出现加载到子元素的时候，父元素本来渲染的样式突然变成了另外一个样式的情况，体验非常不好。

“相邻选择器只能选择后面的元素”也是一样的道理，不可能说后面的HTML加载好了，还会影响前面HTML的样式。

所以，从这一点来讲，CSS支持“父选择器”或者“前兄弟选择器”的可能性要比其他炫酷的CSS特性要低，倒不是技术层面，而是CSS和HTML本身的渲染机制决定的。当然，以后的事情谁都说不准，说不定以后网速都是每秒几个G的，网页加载速度完全就忽略不计，说不定就会支持了。

后面还有些实现假的父类选择器的方法，没有仔细研究，有兴趣的可以看看。我个人猜测可能和JS的单线程有关。

开始时间：2018.06.7

结束时间：2018.06.14

有无延期风险： 无。

禅道：http://task.jnshu.com/zentao/my-task.html