Vue中的CSS相关

371 阅读1分钟

CSS全局样式

全局样式的写法:

1.在.vue文件中的style中写的样式,打包后就是全局样式

2.写一个css文件,在项目中导入import './index.css'就是全局样式

如果全局样式出现了相同的选择器。就看打包配置的入口文件中是哪个最后打包引入项目,哪个的优先级就最高。

局部样式/CSS作用域的实现和原理

1.局部样式实现就是在.vue文件中的style标签中添加一个scoped属性

2.原理就是vue的插件webpack打包时会把当前组件模板中的每一个元素添加一个相同的哈希值命名的属性名并且为添加了scoped的style中的样式选择器上添加一个属性选择器,如此就提高了CSS样式的权重。

3.vue文件中可以出现多个style标签,凡是添加了scoped属性的,里面的选择器就会被修改在原有样式选择器上再添加一个属性选择器,没添加scoped属性的就不会被修改

image.png

css样式穿透

后续补充