比CSS中的选择器大三倍? [英] What is a triple greater than selector in css?

问题描述

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

I saw the following CSS code with what appears to be a triple greater than selector.

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

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

I know it's referencing a Buefy table component and applying a specific style to elements that have a table-wrapper class, but what does the >>>operator mean exactly? Based off this answer I'm thinking it might be for applying styles to children of children of children, is that accurate? If so, why doesn't it seem to work with other amounts of >?

推荐答案

>>>> 运算符是Vue.js的特定功能，称为

>>> operator is Vue.js specific feature and called deep selector. In scoped CSS, you cannot apply CSS to child components without deep selector.

作为您的示例，将不会应用这两个选择器.

As your example, these two selector won't be applied.

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

这篇关于比CSS中的选择器大三倍?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！