发表于: 2017-03-01 22:13:59
1 1186
今天完成的事情:
1、今天写了【前台-找职位】的js部分,成功获取了推荐职位和最新职位的数据;
2、今天完成了【前台-搜索结果】的切换效果;
3、听龚家豪讲选择器的种类和优先级。
明天计划的事情:
完成【前台-搜索结果】的静态页面和数据获取
遇到的问题:
今天主要遇到了选择器的权值问题。先贴代码:
<
div
class
=
"row toggleSearch"
>
<
button
ng-class
=
"{'search-btn':!vm.isChoose}"
ui-sref
=
"field.searchMain.searchCompany"
ng-click
=
"btn_Toggle(!vm.isChoose)"
>公司</
button
>
<
button
ng-class
=
"{'search-btn':vm.isChoose}"
ui-sref
=
"field.searchMain.searchJob"
ng-click
=
"btn_Toggle(vm.isChoose)"
>职业</
button
>
</
div
>
代码可以简化为:
<
div
class
=
"row toggleSearch"
>
<
button
class
=
"search-btn"
>公司</
button
>
<
button
class
=
"search-btn"
>职业</
button
>
</
div
>
问题是在css里面设置的.search-btn样式无效。css里面是这样写的:
.search-btn{ background-color: #fc2b47; color:white;}
尝试把class换成id,结果样式其作用了。于是怀疑是选择器的权值问题,于是改写了css:
.toggleSearch>button.search-btn{ background-color: #fc2b47; color:white; }
通过这种方法,可以增加.search-btn的权值,后来css样式果然起作用了。
收获:
1、学习了ng-class的用法;
可以参考这两篇链接:
https://segmentfault.com/a/1190000004328991
https://segmentfault.com/a/1190000008393758
2、对权值的理解有了新的认识。
评论