css变量引发的bug
大家好今天这bug也挺好玩
他的意思是
这个地方不能用 less 的变量
比如他直接写一个颜色没有问题
这个菜单的颜色和
鼠标悬停上这个弹框
的颜色都会发生变化
但只要他用了变量
只有这个菜单的颜色会变
鼠标悬停上
这个弹框的颜色是不会变的
那我们来找一下原因
首先我们来看一下这个变量的声明
在这里
然后他引用了这个 html5 的（css）变量
我们来看一下这个变量在哪声明的
大家看：一共有三个地方
那通过这三个样式的名称
我们可以看出来
其实他只做了三套皮肤
那不管他应用的哪个皮肤
只有在这三个类样式容器的
子元素里面才能找到这个变量
也就是说：我们可以推断出
这个悬浮的弹框一定不在这三个
类样式的容器里面
我们来看一下
把它悬浮上之后呢
把这个javascript禁用掉
为了调试（悬浮样式）
这时候呢我们检查一下这个元素 （悬浮弹框）
就这个。我们再找他父一级
再父一级
最终呢找到这个div
这个就是这个悬浮弹框的
最外层的div
那他的皮肤应用到哪个 div 了呢
大概在这里克拉斯等于 red
也说他俩现在是并列的关系
所以这个弹框里的元素一定找不到
刚才声明的这个样式
所以要解决这个问题呢
也容易
我们要把这个皮肤应用的样式
定义在包底上
不要定义在这个 app 上就可以了
所以呢我们来搜一下他在哪设置的
打开在这里
我们把它
改到body上
先把它注掉
然后我们再来刷新一下
先把javascript启用
刷新
看看可以了
那我们再换一个样式（皮肤）
打开没有问题了
好今天就到这里谢谢大家
最后更新于