mui 怎麼"去除"mui-active

     在使用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個類才起作用.      





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章