Vue.js:“；数据-v-<；散列>”；作用域CSS的属性

在

.vue

文件中，作用域CSS是一个非常强大的功能，因为它允许CSS仅应用于当前组件。让我们从一个例子开始。根据vue加载程序将转换以下代码：

<style scoped>
.example {
  color: red;
}
ul {
  list-style-type: none;
}
li {
  display: inline-block;
}
</style>

<template>
  <div class="example">
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  </div>
</template>

---

而且我们可以更容易地为整个项目采用流程。

通过您的方法，选择器的特殊性会发生不同的变化：元素越深，选择器链越长。不平等的特异性可以为非常微妙的缺陷打开大门——是的，可以复制，但仍然很微妙。雪上加霜的是，您无法通过单独查看代码来发现这些bug—您必须检查构建

尽管如此，如果这对您的方法和/或项目范围来说不是问题，您仍然可以在vuejs loader中使用这种方法。引述：

如果希望范围样式中的选择器为“深”，即影响 子组件，您可以使用>>>组合器：

一些预处理器，如SASS， 可能无法正确解析

>

。在这些情况下，您可以使用 /改为deep/combinator-它是

>

的别名，可以准确地工作 同样的

---

谢谢你的回复。我忽略了这一点；你能给我提供一些例子或参考资料来说明不平等的特殊性可能带来的非常微妙的错误吗？我已经阅读了你引用的文件的这一部分。它更接近于我的方法，尽管组件的所有子节点都保留属性

data-v-f3eg9

，即使不再需要它。

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
ul[data-v-f3f3eg9] {
  list-style-type: none;
}
li[data-v-f3f3eg9] {
  display: inline-block;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>
    <ul data-v-f3f3eg9>
      <li data-v-f3f3eg9>1</li>
      <li data-v-f3f3eg9>2</li>
    </ul>
  </div>
</template>

<style>
.example.cf3f3eg9 {
  color: red;
}
.cf3f3eg9 ul {
  list-style-type: none;
}
.cf3f3eg9 li {
  display: inline-block;
}
</style>

<template>
  <div class="example cf3f3eg9">
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  </div>
</template>

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

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