vue中的css作用域，vue中的scoped坑3359 www.cn blogs.com/go loving/p/9119460.html一、css作用域
虽然以前受到css范围问题的困扰，但无论是模块化编程还是import css进入相应模块的js，该css都保持全局。 需要添加支持css的模块的html的id/class使用css选择器来确保css的范围是全局的，不会被其他模块的css污染。
vue引入了scoped的概念。 scoped的设计理念是防止将当前组件的样式更改为其他位置的样式。 使用data-v-hash方法标记与css对应的模块，在编写css时不需要添加额外的选择器，非常方便。
但是，请注意作用域。 由于权重问题，如果在子组件中使用了范围，则不能直接在父组件中更改子组件的样式。 父部件必须使用vue的深度动作选择器。
. parent.children {/* . */}.parent/deep/. children {/* . */}二、scoped凹点今天覆盖iview组件的样式
假设这样的组件称为模块专用组件，没有其他scoped的称为模块通用组件。 通过查看DOM结构发现，vue通过对DOM结构和css样式进行唯一、不重复的标记，保证了唯一性，达到了样式的私有化模块化。
//valChange.less (使用嵌套规则(#valueslide ).bigslider.ivu-slider-wrap ) height:6px； }.big slider.ivu-slider-bar { height 33606 px； }.big slider.ivu-slider-button { width :14 px； height: 14px； } }//html部分style lang=' less ' scoped @ import './val change.less '；/styledivclass=' valid-panel ' divclass=' container box ' divid=' value slide ' v-bind 3360 style=' valid style ' slide
也就是说，如果在style中使用scoped属性，将会出现以下情况：
HTML部分：
CSS部分：
从上面的内容可以看出，添加了scoped属性的组件要实现组件样式的模块化，需要执行以下两个操作：
在HTML的DOM节点中添加非重复的data属性(例如data-v-19fca230 )，并在每个语句的css选择器的末尾(编译后生成的css语句)添加当前组件的data属性选择器[ data-v-2330 ]
在我们想覆盖的风格上不起作用。 (匹配在浏览器调试中手动添加“[data-v-19fca230]”属性。)。
那么问题来了：
请参阅本文以了解有关不使用scoped属性的详细信息
总结scoped的三个渲染规则。
1、在HTML的DOM节点上添加不重复的data属性(如data-v-19fca230 )，表示他的唯一性
2 .在每个语句的css选择器的末尾(编译后生成的css语句)添加当前组件的data属性选择器(例如[data-v-19fca230] )，以将样式个性化
3 .如果组件内部包含其他组件，则当前组件的data属性仅会添加到其他组件的最外层标签中
data属性只会添加到第一层HTML中
1、不使用scoped时，如何解决风格的全球污染？
建议使用scoped推动组件私有化。 文章中描述的不使用只出现在现有UI库的样式覆盖中(当然，使用scoped的人很为难)。
首先，解决 解决方案：。 这意味着这里没有用scoped覆盖样式，所以在其他地方调用该组件时就会覆盖它。 在使用组件时，为组件提供问题补充：或其他识别属性(id )，然后覆盖样式为其类名重写样式。
然后解析组件样式全局污染。 如果我们通过了：
syle lang=' less ' @ import './test.less '； /style引入样式时，'./test.less '的其他类名样式可能会污染整个样式，而不使用scoped。 在这里，我们用在模板中使用style/style标签两次的愚蠢方法来处理。
syle lang=' less ' scoped @ import './test.less '； /stylestyle lang='less' //你的翻盖风格/style
因为这样涵盖了样式，所以其他样式不会被全局涵盖。 感兴趣的学生可以自己尝试。 (注意两个标签的顺序。
官方网站vue-loader表示，每个vue模板可以有多个style/style标签，因此上述格式没有问题。
分类：Vue3/Vue2框架生态链