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

Question

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

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

I know it's referencing a Buefy table component and applying a specific style to elements that have a table-wrapper class, but what does the >>>operator mean exactly? Based off this answer I'm thinking it might be for applying styles to children of children of children, is that accurate? If so, why doesn't it seem to work with other amounts of >?

Answer 1

>>>运算符是 Vue.js 特有的特性，称为深度选择器。在作用域 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>