温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么设置css作用域

发布时间:2021-07-23 17:00:35 来源:亿速云 阅读:221 作者:chen 栏目:web开发

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

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

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

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

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

// html内容区域
<template>
  <div class="hello">
    <h2>{{ msg }}</h2>
  </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的边框,而子模块最终表现出来的样式是这样的:
怎么设置css作用域

从上图可以看出,子组件的样式是父组件中子组件根元素和子组件中scoped中CSS样式共同作用的结果。

深度作用选择器

如果你希望scoped样式中的一个选择器能够作用的“更深”,例如影响子组件,你可以使用>>>操作符:

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述代码将会编译成:

.a[data-v-f3f3eg9] .b { /* ... */ }

有些像Sass之类的预处理器无法正确解析>>>。这种情况下可以使用/deep/操作符取而代之–这是一个>>>的别名,同样可以正常工作。试着用之前的代码,使用深度作用选择器在父组件中设置子组件的样式:

父组件

.wrap /deep/ .child--css {
    font-size: 36px;
  }

效果图:
怎么设置css作用域

从高度可以看得到,样式已经作用到子组件里面了。我知道你可能要问,没有看到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作用域这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI