vue项目中遇到的一个问题scoped和学到的小知识点transparent

一、关于scoped的一些问题

1.scoped的作用

scoped的目的是为了解决组件样式私有化的问题,
使用:只需要在组件样式的标签中加入scoped,这样样式只会在本组件中起作用


image.png

加入scoped的样式在浏览器渲染的时候会添加一个唯一的标识


image.png

注意:如果组件内部还有组件,他只会给最外层的组件添加唯一的标识,不会影响内部的组件,
1,子组件中有scoped,父组件中没有,父组件是不可以操作子组件的样式的,相反,如果父组件中有scoped,子组件无,他也不会影响子组件的样式。

2.scoped需要慎用,在使用scoped的过程中会出现一些问题,

问题是:在组建中添加scoped之后,有些样式是不起作用的,样式无法设置到指定的标签上
解决办法:使用深度作用选择器/deep/

image.png

样式查看:
image.png

失败方案:
image.png

image.png

注意:关于具体的介绍可以查看文档vue-loader网址:https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B7%E7%94%A8%E6%9C%AC%E5%9C%B0%E5%92%8C%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F

二、学习到的知识点

样式中设置背景颜色--background-color
1.background-color是设置背景颜色
2.background-color我们经常给的赋值是一种纯颜色,我们的赋值一般为(颜色名字,颜色的十六进制,颜色的rgb)

image.png

注意: background-color还有俩种赋值--默认值transparent和inherit
其中transparent默认值,表示颜色为透明
image.png

inherit 规定是冲父元素继承background-color属性


image.png

问题:至于transparent和inherit的区别我还得在看看,

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。