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

作者 | 无知散人

https://blog.csdn.net/qq_41801484/article/details/106860857

这篇文章主要讲述由于「嵌套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;
}

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

「但是手机浏览器就不会了」

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

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