怎么设置css作用域

这篇文章主要讲解了“怎么设置css作用域”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么设置css作用域”吧！

专注于为中小企业提供网站制作、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业慈溪免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千余家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

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

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

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

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

// html内容区域


//相关数据及事件区域，通俗说就是我们写JS代码的地方


// CSS样式区域


    .hello { color: #efefef; }

可以看到在style标签里面有一个scoped属性，当style标签有scoped属性时，它的CSS只作用于当前组件中的元素。这类似于shadow DOM中的样式封装。它有一些注意事项，但不需要任何的Profill。它通过使用PostCSS来实现以下转换：

.example {
  color: red;
}

转换结果：

混用本地和全局样式

有一点值得注意一下，在一个组件中可以同时使用有作用域和无作用域的样式：

/* 本地样式 */

子元素样式是子元素的根元素和子组件内CSS共同作用的结果

使用scoped后，父作用域的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受到其父作用域的CSS和子组件有作用域的CSS的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式，示例如下：

子组件

    .wrap {
        color: #ffffff;
        background: #666666;
    }

父组件