html - css中的三倍大于选择器是什么?
问题描述
我看到下面的 CSS 代码看起来比选择器大三倍。
.b-table >>> .table-wrapper {
overflow-x: auto;
}
我知道它引用了一个 Buefy 表格组件并将特定样式应用于具有table-wrapper
类的元素,但是该>>>
运算符的确切含义是什么?根据这个答案,我认为这可能是将样式应用于孩子的孩子的孩子,这准确吗?如果是这样,为什么它似乎不适用于其他数量的>
?
解决方案
>>>
运算符是 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>
推荐阅读
- android - Widget.AppCompat.SearchView 明文图标的颜色
- vba - 从选定的 Outlook 邮件中提取所有附件,包括 .msg 附件中的附件
- vba - 控制 IE11 “你想打开/保存” VBA
- java - 在java中合并数组
- python-3.x - Pandas:使用“DatetimeIndex”时处理偏移时区值
- objective-c - Objective-C 排序函数中是否有类似 yield 的东西?
- java - 如何在 Java 对象中表示外键
- python - 分配给临时字典然后是最终字典 - 优势?
- java - 获取用户输入计数
- python - 时间序列 Python 中每小时数据的箱线图