如何设置css作用域

在css中，可以使用scoPEd属性来设置作用域；当style标签有scoped属性时，它的CSS只作用于当前组件中的元素。不过一个子组件的根节点会同时受到其父作用域的CSS和子组件有作用域的CSS的影响。

本教程操作环境：windows7系统、CSS3& & HTML5版、Dell G3电脑。

初接触Vue单文件，对style标签里的scoped属性难免有一点困惑，毕竟之前没有用到过，下面是关于scoped的一些讲解。

一个标准的.vue文件是这样的：

// html内容区域template>
      div class="hello">
        h1>
{
{
 msg }
}
    /h1>
      /div>
    /template>
    //相关数据及事件区域，通俗说就是我们写JS代码的地方script>
export default {
  name: 'HelloWorld',  data () {
    return {
      msg: 'Welcome to Your Vue.js App'    }
  }
}
    /script>
    // CSS样式区域!-- Add "scoped" attribute to limIT CSS to this component only -->
    style scoped>
    .hello {
     color: #efefef;
 }
    /style>
    

可以看到在style标签里面有一个scoped属性，当style标签有scoped属性时，它的CSS只作用于当前组件中的元素。这类似于shadow DOM中的样式封装。它有一些注意事项，但不需要任何的PRofill。它通过使用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 {
        margin: 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作用域的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！