一、关于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的区别我还得在看看,