今天完成的事：了解了伪类和伪元素；但还不能熟练使用；任务10页面写出来了；

明天要完成的事：通过任务10；添加input和selest的样式；了解伪类的使用和使用条件；

熟悉input的各个属性和标签；修改checked；使得进入页面拥有默认样式；

使页面成为响应式页面；

难题：要改变input的样式；看了师兄的方法；使用lable伪类来对input进行代替；

隐藏掉之前的input；我按图所以隐藏了input；但是lable的伪类并没有出现；

自己解决不了；百度完基本上是让你加content；所以先把头部和底部写完了；

然后反思了一下；我是要让他是有初始状态的：第一个是蓝色其他的是灰色；

然后点击被点击那个及被选中那个变成蓝色；

且按任务要求；按钮只能单选则需要用radio；radio被选中时颜色改为蓝色；

则关联按钮与input  type=“radio”；

在css部分加上当input处于选中状态则按钮{

颜色改变；字体颜色改变}

写完就ok了；

把他们做一个折叠导航栏时出问题了，没有关联上；但是确实没错啊；先放下写后面的；

将预选项添加完成；

我就奇怪了；为啥就关联不上呢？？明天再看一下；

还不行这个响应式我就拿任务9的样子做

收获：

css3为了区分伪类和伪元素，伪元素采用双冒号写法。

常见伪类——:hover,:link,:active,:target,:not(),:focus。

常见伪元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

简单来说就是：用来往里面添加东西；东西多了就成了代替品；

checked="checked"

可以使checked拥有预选项；

liline-block是个好东西；

用得好舒服；用的不好想死

• inline（行内元素）:
  1. 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 
  2. 不能更改元素的height，width的值，大小由内容撑开. 
  3. 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
• block（块级元素）:
  1. 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度. 
  2. 能够改变元素的height，width的值. 
  3. 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
•  inline-block（融合行内于块级）:
  1. 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.用通俗的话讲，就是不独占一行的块级元素；