关于浏览器更新后出现的样式问题

Chrome浏览器更到最新版本后,有一些样式就无法生效了。

在网上找了很多的方式也没有办法恢复样式,于是就自己尝试着改变了一下选择器的层级,将样式单独移除作用到组件结构上,发现样式是可以生效的,最后发现加了deep的选择器样式无法生效,然后将其移除后样式就立马生效了,做了多次尝试后发现了一些问题,以下总结一下。

在style中没有加上scoped

在style中不加上scoped(scoped的作用就不解释了),在浏览器更新后就出现了问题,无法使用deep修饰样式选择器,但凡是使用了的都不会生效。
在这里插入图片描述
解决办法:将deep 修饰去掉,样式就再次生效
在这里插入图片描述

在style中加上scoped

deep修饰的选择器无法相互嵌套,在新版浏览器中,非要这样使用就会导致样式无法生效。

在这里插入图片描述
解决方式:将嵌套中的deep修饰去除,就不会再次影响样式。
在这里插入图片描述
说白了就是没有做好代码的规范,前人写的代码影响到了后面的代码,同样的现在写的代码如果没有规范好,也会影响到往后的代码,总之一个良好的代码习惯和统一的规范是非常重要的

猜你喜欢

转载自blog.csdn.net/cautionHua/article/details/114594007