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

Posted 2023-03-06

【中文标题】css中的三倍大于选择器是啥？

【英文标题】：What is a triple greater than selector in css?css中的三倍大于选择器是什么？

【发布时间】：2019-09-12 01:01:19

【问题描述】：

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

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

我知道它引用了 Buefy 表格组件并将特定样式应用于具有 table-wrapper 类的元素，但 >>>operator 究竟是什么意思？基于this answer 我想这可能是为了将样式应用于孩子的孩子的孩子，这准确吗？如果是这样，为什么它似乎不适用于其他数量的>？

【问题讨论】：

这不是有效的 CSS。你在使用预处理器吗？

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

您使用的是旧版本的 Angular 吗？如果是这样，它已被弃用，相当于 ::ng-deep

@Chris W. 不，它正在使用 Vue。

Vue uses it also.

【参考方案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>

【参考方案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）