css 中的三倍大于选择器是什么?
What is a triple greater than selector in css?
我看到了下面的 CSS 代码,其中似乎有比选择器大三倍的内容。
.b-table >>> .table-wrapper {
overflow-x: auto;
}
我知道它引用了 Buefy table 组件并将特定样式应用于具有 table-wrapper
class 的元素,但 >>>
运算符的确切含义是什么?基于 this answer 我想这可能是为了将样式应用到 children of children of children,这样准确吗?如果是这样,为什么它似乎不能与其他数量的 >
一起使用?
>>>
运算符是 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>
是穿影子孙组合子。在Angular、>>>
、/deep/
和::ng-deep
中是一样的(来源:https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep). It is deprecated and support has ben removed from major browsers. For example, it has been removed since Chrome version 63, around December 5 2017 (source: https://www.chromestatus.com/feature/6750456638341120)
我看到了下面的 CSS 代码,其中似乎有比选择器大三倍的内容。
.b-table >>> .table-wrapper {
overflow-x: auto;
}
我知道它引用了 Buefy table 组件并将特定样式应用于具有 table-wrapper
class 的元素,但 >>>
运算符的确切含义是什么?基于 this answer 我想这可能是为了将样式应用到 children of children of children,这样准确吗?如果是这样,为什么它似乎不能与其他数量的 >
一起使用?
>>>
运算符是 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>
是穿影子孙组合子。在Angular、>>>
、/deep/
和::ng-deep
中是一样的(来源:https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep). It is deprecated and support has ben removed from major browsers. For example, it has been removed since Chrome version 63, around December 5 2017 (source: https://www.chromestatus.com/feature/6750456638341120)