Question

我看到了以下CSS代码，看上去比选择器大了三倍。

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

我知道它是在引用Buefy表组件并将特定的样式应用于具有table-wrapper类的元素，但是>>>运算符到底是什么意思？基于this answer，我认为这可能是为了将样式应用于孩子的孩子，这样准确吗？如果是这样，为什么它似乎不能与其他数量的>一起使用？

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）。它已被弃用，并且已从主要浏览器中删除支持。例如，它已于 2017 年 12 月 5 日左右从 Chrome 63 版开始删除（来源：https://www.chromestatus.com/feature/6750456638341120）

比CSS中的选择器大三倍？

2 个答案: