这篇文章主要讲述由于嵌套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理解不深 并且有多层父子组件嵌套的时候,想在父组件修改子组件样式就可能会出现
.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
在样式开发过程中,有两个问题比较突出:全局污染 —— CSS 文件中的选择器是全局生效的,不同文件中的同名选择器,根据 build 后生成文件中的先后顺序,后面的样式会将前面的覆盖;
style-loader 的功能就一个,在 DOM 里插入一个 <style> 标签,并且将 CSS 写入这个标签内。稍后会详细分析源码,看看和我们的思路是否一致。
在vue当中绑定class和style的方式有很多种,基本都知道,但是在项目当中真正遇到需要用样式变化呢的场景却怎么也想不起来,很模糊,只能写一些简单地样式逻辑,今天来总结一下vue中动态绑定样式的情况
先看例子,我们可以在里面填写样式,直接修改就当前页面的UI,是不是觉得很神奇,这是如何实现的呢,其实只是一个style的标签就可以搞定,代码如下
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!