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

更新日期: 2022-02-10阅读: 1.2k标签: style

这篇文章主要讲述由于嵌套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://fly63.com/article/detial/11128

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!