css - 带有直接子项的 Vue-loader 深度选择器

Question

我有一个选项卡组件，里面有像这样的其他选项卡

<tabs :class="{ 'my-class': ifTrue }">
    <tab v-for="tab in tabs">
        ...
    </tab>
    <tab-item v-for="tab in tabs">
        <tabs :class="{ 'my-class': ifTrue }">
            <tab v-for="tab in tabs">
                ...
            </tab>
            <tab-item v-for="tab in tabs">
                ...
            </tab-item>
        </tab>
    </tab-item>
</tab>

<style scoped>
    .no-tabs >>> .tab {
        display: none
    }
</style>

从我使用 tabs 的组件我想隐藏直接子 tab 如果它有类，问题是当我像上面那样应用类时，它也会隐藏 tab-item 中的 tab，我只想隐藏直接选项卡子项。有点像

In css would be 
.no-tabs > .tab

But in vue i try this but wont work.

.no-tabs >>> > .tab
or
.no-tabs > >>> .tab

但这些都不起作用，我如何才能只访问第一个选项卡直接子 .tab ？

我无法编辑 tabs 组件，这就是为什么我不直接在那里编辑的原因。

Answer 1

出于某种原因，vue-loader 不理解这种形式

.no-tabs >>>> .tab

使用这个对我有用

.no-tabs/deep/> .tab