随着代码规模的增长，前端项目中的CSS管理已成为一个问题，其中之一就是CSS规则冲突。多人合作开发的项目有时可能是通过命名方法不可避免的。在这方面，不同前端框架具有不同的解决方案。
范围原理：添加示波器属性后，您会发现在浏览器上可以查看开发工具。组件模板中的每个DOM元素都有一个属性data-v-xxx，并且CSS规则还具有相应的属性选择器。这些属性名称是组件的唯一ID，并且每个组件都不同。样式规则仅应用于相应的组件，以防止彼此的干扰。
示例描述：
“原理：”当我们打开控制台并抓住相应的DOM元素时，我们会发现我们的“样式选择器”将成为
“选择”的最终级别添加了一系列唯一的哈希代码“ data-V-127071c6”来完成此样式，仅对重组生效。
因此，这就是为什么在范围组件中未修改它的原因。它也是示波器的子组件。由于子组件和父组件的“哈希代码”无法匹配，因此样式不能有效。
思考问题：组件只会将属性data-v-xxx添加到模板中的元素，而无需将此属性添加到子组件中的元素。在同一时间，生成的CSS属性选择器也仅适合其自己DOM元素，不能应用于子舱的内部元素。
深处的原理是将属性选择设备中的属性移至上层，以便可以使用所有子元素。
深层的主要作用是改进“ CSS样式选择设备动作域”。深入必须与“ Spoped”属性结合使用，因此首先，我们需要了解范围的作用
目前，我们需要使用“深”来帮助我们“改善范围”
示例描述：
现在让我们看一下渲染风格：
找到“ data-v-127071c6”，这是不难的，这是一个直接修改深**“先前级别” **的哈希代码字符串。
实际上，最好说不应该嵌套深处。
当我们不了解深处并具有嵌套的父子成分的多层层时，如果您想修改父零件中的子组件样式，我们可能会出现。
这本奇妙的写作。首先，让我们看一下将分解为幽灵的哪种写作。
问题在这里。这本身是不正确的，但是“浏览器是兼容的”，完全可以识别，因此该样式将正常生效。但是移动浏览器不会。
这里的三个数字超过数字>>>是So值的深度选择器。选择器的作用是DIV下的所有按钮应用程序样式规则，甚至是子cutter内部呈现的按钮。
这是写入深度选择器的另一种方法，>>> >>/deep/。这种写作的原因是因为某些预编辑（例如Sass）无法识别>>>此语法会导致汇编的失败。在这种情况下，只需使用/深/。
深度选择器不经常使用，但可以在特定情况下解决特定问题。此外，值得一提的是，深度选择器将应用于所有子类（包括嵌套元素）中的元素。因此，您需要考虑使用影响力范围并采取适当的措施。