怎么设置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;
    }

父组件