今天完成的事情：

完成了任务7第2页的内容；用js实现了音乐的播放和暂停；实现了点击方块悬停雪碧图按钮的效果；直播听老大的开学典礼。

明天计划的事情：

做完第3页内容，完成任务7.

遇到的问题：

我是用媒体查询根据不同宽度来设置根目录字体的大小，然后用rem设置字体和宽高，从而来实现页面的自适应。但是在宽度变化的过程中，中间有一段会出现如上图所示的空白区域，不知道是什么原因、怎么解决。

收获：

今天设置链接的link,visited,hover,active这几个伪类属性的时候，想到学习的时候看到有说法就是设置属性的时候需要按顺序来，就想探究一下设置顺序的实际情况以及原因。最后通过自己编的小demo试验以及查找文章，得到了以下比较靠谱的结论：

由于伪类的选择器优先级一致，后面的a链接样式会覆盖前面的。

所以说，

a:hover定义一定要放在a:link、a:visited的后面，才能在鼠标悬停时，a:hover样式不被a:link和a:visited样式覆盖；

a:visited一定要放在a:link的后面，因为这样能保证访问过的链接具有a:visited样式，并能覆盖a:link默认样式；

a:active一定要放在a:hover后面。假如a:active放在a:hover前面，由于a:active拥有鼠标悬停a:hover属性，当鼠标按下时，首先会触发a:hover事件，然后触发a:active，但是a:ctive已被a:hover的样式所覆盖，因此无法看到a:active的样式。所以，a:active一定要放在a:hover后面。

综上所述，a伪类的顺序为：a:link > a:visited > a:hover > a:active。