html - css 中大于选择器的三倍是什么？

Question

我看到以下 CSS 代码似乎是一个大于选择器的三倍。

.b-table >>> .table-wrapper {
  overflow-x: auto; 
}

我知道它正在引用一个 Buefy 表组件并将特定样式应用于具有 table-wrapper 的元素。类，但是 >>> 是什么？运营商的意思是什么？基于 this answer我在想这可能是为了将样式应用于 child 的 child 的 child ，准确吗？如果是这样，为什么它似乎不适用于其他数量的 > ?

Answer 1

>>>运算符是 Vue.js 的特定功能，称为 deep selector .在作用域 CSS 中，您不能将 CSS 应用于没有深度选择器的子组件。
作为您的示例，将不会应用这两个选择器。

<style scoped>
.table-wrapper {
  overflow-x: auto !important;  /* won't work */
}
.b-table .table-wrapper {
  overflow-x: auto !important;   /* won't work */
}
</style>

它需要深度选择器。

<style scoped>
.b-table >>> .table-wrapper {
  overflow-x: auto; 
}
</style>