Vue---CSS样式的作用域

引入方式：在 .vue文件中的style标签中写入样式 打包以后就是全局样式

  写一个css文件在项目中引入也是全局样式

 

如果全局样式出现相同的选择器，先导入的优先级低

举例：

在App.vue中导入tbox.vue文件，再次文件中添加变量msg，并修改msg值得字体颜色时

App.vue文件

<template>

  <div class="mainbox">

    <tbos>tbos> 

  div>

template>

<script>

import tbos from "./components/tbos.vue"

export default {

  components:{

    tbos   

 

}

}

script>

<style>

.p{

  color: rgb(226, 43, 52);

}

style>

tbox.vue文件

<template>

    <p class="p">{{msg}}p>

template>

<style>

    .p{

        color: blue;

    }

   

style>

结果：

 

在App.vue文件中同时也修改其字体颜色时：

App.vue文件

<style>

.p{

  color: rgb(226, 43, 52);

}

style>

结果：（因为App.vue文件中的style标签比tbox.vue文件后运行，所以其样式优先级高于tbox.vue文件中的style样式）

 

同时在main.js中引入一个css文件时：

main.js文件

import Vue from 'vue'

import App from './App.vue'

import "../src/a.css"

new Vue({

  render: h => h(App),

}).$mount('#app')

 

css文件

.p{

    color: aqua;

}

 

结果：（因为vue文件比css文件先导入，所以vue文件得优先级低于Css文件得；如果将css文件先导入，那么最后得效果就会使vue文件决定的）

 

 

 

局部样式实现原理：

在style标签中添加一个scoped

举例：

在App.vue文件中同时也修改其字体颜色，同时在main.js中引入一个css文件

tbox.vue文件

<style scoped="scoped">

    .p{

        color: blue;

    }

   

style>

结果：

Vue的插件在wedpack打包时回

把当前组件模板中每一个元素添加一个相同哈希值命明的属性值

并且添加scoped的style中的标签上添加一个属性选择器

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