CSS中的三个大于号选择器是什么？

Question

我看到以下CSS代码，其中似乎有一个三重大于号选择器。

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

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

- Dan Mandel

---

这不是有效的CSS语法。您是否在使用预处理器？ - APAD1

有趣。我认为该代码库正在使用Sass和PostCSS。 - Dan Mandel

你正在使用旧版本的Angular吗？如果是，那么它已经被弃用，等同于::ng-deep。 - Chris W.

@Chris W. 不是，它正在使用Vue。 - Dan Mandel

Vue也使用它。 - Chris W.

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>

- noobar

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）。

- Lee Chee Kiam