前端培训技术作用域样式(scoped css)与深度作用选择器

发布时间:2021年02月04日作者:atguigu浏览次数:416

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 
● 结果: 对子/孙组件标签就没有此属性的条件, 就可以匹配上子/孙组件内的标签, 进而改变其样式效果

想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训,尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习


上一篇:
下一篇:
相关课程

java培训 大数据培训 前端培训 UI/UE设计培训

关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
全国统一咨询电话:010-56253825
地址:北京市昌平区宏福科技园2号楼3层(北京校区)

深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)

武汉市东湖高新开发区东湖网谷(武汉校区)

西安市雁塔区和发智能大厦B座3层(西安校区)