在使用mui的过程中,list是比较常用的 ,今天刚好遇到了这样一个问题,tap时会有背景出现,也就是mui-active,按自己的理解,写了这样的css
.mui-table-view-cell .mui-active{
background-color: #fff;
}
然而并没有什么卵用,尝试各种方法未果,再去看了下官方文档 ,使用如下css代码可以成功
.mui-table-view-cell.mui-active{
background-color: #fff;
}
那么再拓展一下,自己也记下,也防止后面的兄弟踩坑 ,在写css类的时候,中间有无空格有什么区别呢?
参照上面的代码,第一段代码相当于下面这样:
<li class="mui-table-view-cell ">
<span class="mui-active">微信 : </span>
{$data['wechat']}
</li>
第二段代码相当于这样:
<li class="mui-table-view-cell mui-active ">
<span class="">微信 : </span>
{$data['wechat']}
</li>
可以知道:
1. 有空格分隔是后代选择器,是包含关系,表示选择的mui-table-view-cell 下面的mui-active.
2. 没有空格分隔则是在一个元素上,即 li 同时有mui-table-view-cellmui-active ,这个元素同时有这2个类才起作用.