vue中css作用域

当<style>标签用scoped属性时,它的css只作用于当前组件中的元素。

混用本地和全局样式

你可以在一个组件中同时使用有作用域和无作用域的样式:

<style>
/*全局样式*/
</style>
<style scoped>
/*本地样式*/
</style>

子组件的根元素

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

深度作用选择器

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

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

本文来源

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1 92
  • 最近学习到CSS的继承属性,正好看到这篇文章,便将它翻译出来。作者的思想,在平时的项目中或多或少都有用过,但是从来...
    hershin阅读 958评论 0 1
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,083评论 0 29
  • 新买了两本情景认知书,其中有一本你认识这些车吗,里面有各种各样的车,儿子最喜欢车了,这下可有得看了。 先是翻到了飞...
    芊芊意树阅读 546评论 0 51
  • 云南沙溪古镇,原味的古镇,位于云南剑川县西南部,处于大理风景名胜区与丽江古城之间。 在沙溪古镇,黄泥的土坯墙、陈旧...
    红莲叶阅读 867评论 21 21