css - 特定类的 Vaadin 组件 CSS

Question

我正在尝试从使用特定 CSS 类的每个 Grid 实例中删除网格单元格焦点样式。

CSS

.v-grid-cell-focused:before {
    display: none !important;
}

效果很好，但将样式应用于我的应用程序中的所有 Grid 实例。

我尝试通过以下方式使其专门应用于 CSS 类：

.mygrid.v-grid-cell-focused:before {
    display: none !important;
}

或者

.v-grid-cell-focused.mygrid:before {
    display: none !important;
}

或者

.mygrid > .v-grid-cell-focused:before {
    display: none !important;
}

但不会导致默认行为发生任何变化。

我已成功使用以下 CSS

.v-grid-cell.anotherGrid {
    background-color: #07a9ca;
    color: #000;
}

其中唯一采用上述样式的网格是我分配给样式名称的网格anotherGrid。这向我表明，在我的情况下，CSS 选择器可能存在复杂性:before，再加上导致我的实现无法工作的自定义 CSS 类。

如何引用 Vaadin 组件 CSS 并将其仅应用于我指定的特定 CSS 类？

score 2 · Accepted Answer

我有同样的要求，对我来说，以下风格有效：

.mygrid .v-grid-cell-focused:before {
    display: none !important;
}

请注意和之间的空格.mygrid，.v-grid-cell-focused:before这意味着不仅要选择直接子代（就像您对所做的那样>）。

1 回答 1