这篇文章主要讲述由于嵌套deep的错误用法而导致的移动端真机样式失效问题,
已经对于deep深刻理解和不是此原因的小伙伴就不用看了
问题描述:
部分样式在本地使用谷歌浏览的手机模拟窗口调试时正常,但是真机上就完全样式不生效,由于样式过多,
所以就可以直接排除 css样式兼容 这个问题了
deep
deep的主要作用是css样式选择器作用域的提升
deep肯定是和scoped属性结合使用的,那么首先我们就需要先了解一下scoped的作用
scoped
示例:
<style lang="less" scoped>
.massif-table{
.top-date{
background:red;
}
}
</style>
通常我们为了避免当前组件的样式影响其他组件的样式时,会使用scoped将此组件的样式转为私有样式,即让其修饰的样式只对此组件起作用
原理:
当我们打开控制台,抓取到对应的dom元素后,在右侧会发现我们的样式选择器变成了
.massif-table .top-date[data-v-127071c6]{
background:red;
}
以及组件最外层的dom元素
不难发现scoped实际上是
在我们的组件最外层元素加了一串唯一的hash码 data-v-127071c6
选择器最后的层级加了一串唯一的hash码 data-v-127071c6
以此来完成限制此样式只对改组件生效。
那么 这也就是为什么在scoped的组件内无法修改同样有着scoped的子组件的样式
因为子组件和父组件的hash码不一致,选择器匹配不到,所以样式无法生效。
所以此时 我们就需要使用 deep 来帮我们提升作用域
deep
示例
<style lang="less" scoped>
.massif-table{
.top-date{
/deep/ .sub-componpent{
background:red;
}
}
}
</style>
ok,现在我们再来看看渲染后的的样式
.massif-table .top-date[data-v-127071c6] .sub-componpent{
background:red;
}
不难发现 data-v-127071c6 这一串hash码被提到了 deep直接修饰的上一层级
由于没有hash码的限制,,那么自然可以匹配到子组件sub-componpent的dom元素,样式会生效。
同时又有上层的hash控制,所以就不会对和此父组件同层级的其他组件内的样式产生副作用。
错误的嵌套deep写法
其实与其说错误写法 倒不如说deep就不该有嵌套这种写法
在我们对deep理解不深 并且有多层父子组件嵌套的时候,想在父组件修改子组件样式就可能会出现
.fu{
/deep/ .zi1{
/deep/ .zi2{
/deep/ .zi3{
background:red;
}
}
}
}
这种奇葩的写法。
首先我们看看这种写法会被解析成什么鬼样子
.fu[data-v-127071c6] .zi1 /deep/ .zi2 /deep/ .zi3{
bakcground:red;
}
问题就来了,,,这种本身是不正确的,但是浏览器却可以兼容,完全无误的识别,所以样式会正常生效
但是手机浏览器就不会了
就会出现谷歌浏览器调试时万事大吉
真机样式永远不会生效的奇葩问题