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

Question

我看到下面的 CSS 代码看起来比选择器大三倍。

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

我知道它引用了一个 Buefy 表格组件并将特定样式应用于具有table-wrapper类的元素，但是该>>>运算符的确切含义是什么？根据这个答案，我认为这可能是将样式应用于孩子的孩子的孩子，这准确吗？如果是这样，为什么它似乎不适用于其他数量的>?

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>

Answer 2

是穿影后裔组合子。在 Angular 中>>>，/deep/和::ng-deep是相同的（来源：https ://angular.io/guide/component-styles#deprecated-deep--and-ng-deep ）。它已被弃用，并且已从主要浏览器中删除支持。例如，自 Chrome 版本 63 以来，它已在 2017 年 12 月 5 日左右被删除（来源：https ://www.chromestatus.com/feature/6750456638341120 ）