在使用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;
}
乍一看感覺2個沒什麼區別啊,但是兄弟仔細看一看,下面的2個類之間是沒有空格分隔的.
那麼再拓展一下,自己也記下,也防止後面的兄弟踩坑 ,在寫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個類才起作用.