1.作用域样式是什么?
1). <style scoped>
2). 让组件的样式限定在当前组件作用域(范围)内有效, 对其它外部或内部组件无效
2.组件不加scoped声明的问题
一个组件的样式可以影响到外部或内部的所有任何组件, 如果不做限制就会出现样式效果的问题
3.组件声明使用scoped
1). 标签变化: 组件内所有标签包括子组件的根标签都添加了自定义data属性来标识，如: data-v-2e8d0da5
2). 选择器的变化：组件内所有样式选择器的都右边都会添加上自定义data属性的条件， 如： .test2 .t3[data-v-2e8d0da5]
3). 结果：一旦加上scoped后， 样式选择器不再能匹配上子、孙组件的标签（根标签除外）
4.深度作用选择器
1). 作用
使用了scoped后, 还能修改子/孙组件的样式, 尤其是第三方UI组件库组件
2). 语法
3)原理:
● 内部是由vue-loader来进行编译处理的
● 编译打包后样式选择器上的data属性条件加在了最左边第一层选择器上: .test2[data-v-2e8d0da5] .t3
● 结果: 对子/孙组件标签就没有此属性的条件, 就可以匹配上子/孙组件内的标签, 进而改变其样式效果
想要了解跟多关于前端培训技术记得关注哦！