当前位置: 首页 > 工具软件 > FytApi.MUI > 使用案例 >

mui 怎么"去除"mui-active

劳豪
2023-12-01

     在使用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个类才起作用.      





 类似资料: