发表于: 2018-07-01 22:20:44

1 856


今天完成的事情:继续任务十四,晚上看了一些JavaScript的内容有助于睡眠。


明天计划的事情:继续任务十四。 


遇到的问题:1、任务十四的页面相比之前的三个任务要复杂得多,用sass嵌套总会出现一些问题,不是不生效,就是页面会崩,sass代码相当严格,有一点问题就会全部失效。


                  2、任务十四是不能直接套用框架的,要自己写框架,还要模块化,怪自己没有仔细看任务要求,任务十四只能重写了。


收获:在sass中善用选择器能少些很多类名。


上边这三个组合选择器必须和其他选择器配合使用,以指定浏览器仅选择某种特定上下文中的元素。

article section { margin: 5px }
article > section { border: 1px solid #ccc }

你可以用子组合选择器>选择一个元素的直接子元素。上例中,第一个选择器会选择article下的所有命中section选择器的元素。第二个选择器只会选择article下紧跟着的子元素中命中section选择器的元素。

在下例中,你可以用同层相邻组合选择器+选择header元素后紧跟的p元素:

header + p { font-size: 1.1em }

你也可以用同层全体组合选择器~,选择所有跟在article后的同层article元素,不管它们之间隔了多少其他元素:

article ~ article { border-top: 1px dashed #ccc }

这些组合选择器可以毫不费力地应用到sass的规则嵌套中。可以把它们放在外层选择器后边,或里层选择器前边:

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }  dl > {    dt { color: #333 }    dd { color: #555 }
  }  nav + & { margin-top: 0 }
}

sass会如你所愿地将这些嵌套规则一一解开组合在一起:

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

sass中,不仅仅css规则可以嵌套,对属性进行嵌套也可以减少很多重复性的工作。



朱士峰-css10任务总结

任务名称:CSS=TASK10

成果链接:https://z1994.github.io/daku/task10/task10.html

任务耗时:2018.6.15-2018.6.20

任务总结:

1、任务十第一个难点就是input,比如改变input的按钮效果,是否能多选,去除默认样式给其添加自己想要的样式等等。

2、第二个难点就是可能就是那个进度条了,想达到完美效果,确实要花一些时间。

3、有时间的话可以重写一遍,因为input还是不够熟练。




返回列表 返回列表
评论

    分享到