Question

有没有办法简化以下css规则，以便不必重复.x-grid-row选择器？

#OpenRequestListGrid .x-grid-row, #MyRequestListGrid .x-grid-row {
    line-height: 13px;
    padding: 0 1px;
    vertical-align: top;
    background-color: #BBB;
}

这里的重要问题是我不想单独指定.x-grid-row，因为此规则来自更大的库。

注意：也许我第一次不清楚，但我不想使用.x-grid-row，因为这会影响我想留下的其他网格。我想只针对我的两个网格。我的目标是不为每个网格ID重复两次相同的配置。

HTML示例：

<div id="dontChangeMe" class="x-grid-row">
<div id="OpenRequestListGrid" class="x-grid-row">
<div id="MyRequestListGrid" class="x-grid-row">

Answer 1

CSS没有变量，但是当您想在文档中选择所有元素.x-grid-row时，您应该将其简化为：

.x-grid-row {
    line-height: 13px;
    padding: 0 1px;
    vertical-align: top;
    background-color: #BBB;
}

或者只是在讨论部分范围时搜索.x-grid-row的公共父级，并使用它：

#common-parent .x-grid-row {
    ...
}

或

.common-parent .x-grid-row {
    ...
}

或任何其他css选择器;）

修改

我只是重读了您的问题，当您想要解决很多元素时，您也可以使用.x-grid-row {...}这样的全局选择器，并指定更多选择器，例如#inner-box .x-grid-row { ... }仅为少数元素将值更改回默认值。

Answer 2

如何使用.x-grid-row或使用选择器，它是＃OpenRequestListGrid和#OpenRequestListGrid的父级。

Answer 3

所以答案是真的没有其他办法。重复元素id然后是相同的选择器是必要的。感谢所有回复的人。

CSS规则新手

3 个答案: