Scoped Style解决方案之deep深入理解

这篇文章主要讲述由于嵌套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 来帮我们提升作用域

示例

<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;
}

问题就来了，，，这种本身是不正确的，但是浏览器却可以兼容，完全无误的识别，所以样式会正常生效。

但是手机浏览器就不会了，就会出现谷歌浏览器调试时万事大吉，真机样式永远不会生效的奇葩问题。

其实往往很多头疼的问题最终发现都是一些简单的失误造成的。这也恰恰是我们需要去深挖的一些东西。希望能给大家带来些帮助。

作者 | 无知散人
https://blog.csdn.net/qq_41801484/article/details/106860857

链接: https://www.fly63.com/article/detial/11128