Vue文件中css相关知识

CSS的作用域分为全局作用域和局部作用域

什么情况下导入组件的css是全局作用域？

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

2、写一个css文件 在项目中导入就是全局样式

如果全局样式出现了相同的选择器. 就看是哪个最后打包引入项目，哪个的优先级就最高。

举个例：

tcss.vue文件：设置颜色为红色

<style>
    .a{
        color: red;
    }
style>

tcss1.vue:设置颜色为绿色

<style>
    .a{
        color: green;
    }
style>

在导入这两个组件时，先导入tcss.vue后导入tcss1.vue

 
<script>
import t1 from "@/compcss/tcss.vue"
import t2 from "@/compcss/tcss1.vue"
export default {
  components:{
    t1,
    t2
  }
}
script>

页面情况：

可以看到都变成了绿色，即可说明这是全局样式，就近优先。

那么在不改变类名的情况下，就测试1变成它自己设置的颜色呢？

引入局部样式 ，在css代码所在的style标签内加上一个scoped属性，值为布尔值，为true时会变成局部样式，fasle则不会。

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

修改tcss.vue文件代码：

<style scoped="1">
    .a{
        color: red;
    }
style>

效果：

 vue文件中可以出现多个style标签  凡是添加了scoped属性的,里面的选择器就会被修改  没添加scoped属性的就不会被修改。。