在css中，可以使用sco PE d属性来设置作用域；当style标签有scoped属性时，它的CSS只作用于当前组件中的元素。 不过 一个子组件的根节点会同时受到其父作用域的CSS和子组件有作用域的CSS的影响。
本教程操作环境：windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。
初接触Vue单文件，对style标签里的scoped属性难免有 一点 困惑 ，毕竟之前没有用到过，下面是关于scoped的一些 讲解 。
一个标准的.vue文件是这样的：
// html内容区域
<template>
<div class="hello">
< h1 >{{ msg }}</h1>
</div>
</template>
//相关数据及事件区域，通俗说就是我们写JS代码的地方
<script>
export default {
n am e: & # 39;HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
// CSS样式区域
<!-- Add "scoped" attribute to lim IT CSS to this component only -->
<style scoped>
.hello { color: #efefef; }
</style>可以看到在style标签里面有一个scoped属性，当style标签有scoped属性时，它的CSS只作用于当前组件中的元素。这类似于shadow DOM中的样式封装。它有一些注意 事项 ，但不需要任何的 PR ofill。它通过使用PostCSS来实现以下转换：
<style scoped>
.example {
color: red ;
}
</style>
<template>
<div class="example">hi</div>
</template>转换结果：
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>混用本地和全局样式
有一点值得注意一下，在一个组件中可以同时使用有作用域和无作用域的样式：
<style> /* 全局样式 */ </style> <style scoped> /* 本地样式 */ </style>
子元素样式是子元素的根元素和子组件内CSS共同作用的结果
使用scoped后，父作用域的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受到其父作用域的CSS和子组件有作用域的CSS的影响。这样设计是为了让父组件可以从布局的角度出发， 调整 其子组件根元素的样式，示例如下：
子组件
<template>
<div class="wrap">
<p>Hello world</p>
</div>
</template>
<style scoped>
.wrap {
color: #ffffff;
background: #666666;
}
</style>父组件
<template>
<div class="wrap">
//ChildMOdul为上面的子组件
<ChildModul/>
</div>
</tamplate>
<style scoped>
//子组件根元素样式
.wrap {
m arg in: 0 10px
}
</style>子组件中定义了一个背景色为#efefef颜色为#ccc的样式，在父元素中，为子组件的根元素定义了一个左右为10px的边框，而子模块最终表现出来的样式是这样的：
从上图可以看出，子组件的样式是父组件中子组件根元素和子组件中scoped中CSS样式共同作用的结果。
深度作用选择器
如果你希望scoped样式中的一个选择器能够作用的“更深”，例如影响子组件，你可以使用>>>操作符：
<style scoped>
.a >>> .b { /* .. . */ }
</style>上述代码将会编译成：
.a[data-v-f3f3eg9] .b { /* ... */ }有些像Sass之类的 预处理器 无法正确解析>>>。这种情况下可以使用/deep/操作符取而代之–这是一个>>>的别名，同样可以 正常 工作。试着用之前的代码，使用深度作用选择器在父组件中设置子组件的样式：
父组件
.wrap /deep/ .child--css {
font- Size: 36px;
}效果图：
从高度可以看得到，样式已经作用到子组件里面了。我 知道 你可能要问，没有看到Sass预选择器，为什么用的是/deep/而不是>>>,这个其实我也不知道，先用了>>>没有用，然后换了使用/deep/，样式是有效果的。说句不负责任的话，如果>>>没作用，就换成/deep/吧，反正目的是让父组件里写的样式能渗透到子组件。。。
动态生成的内容
通过v-html创建的DOM内容不受作用域内的样式的影响。但是你仍然可以通过深度作用选择器为它们 设置样式 。
需留意事件
CSS作用域不能代替class： 考虑到浏览器渲染各种CSS选择器的方式，当p{ color: red } 设置了作用域时（即与特性选择器组合使用时）会慢很多倍。如果你使用class 或者 id取而代之，比如.example { color: red },性能影响就会消除。
在递归组件中 小心 使用后代选择器 对选择器.a .b中的CSS规则来说，如果匹配 .a的元素包含一个递归子组件，则所有的子组件中的.b都将被这个规则匹配。
推荐学习：css视频教程
以上就是如何设置css作用域的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 如何设置css作用域 全部内容，希望文章能够帮你解决 如何设置css作用域 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。