如何在 CSS 中继承祖先而不是父代？

Question

这是我的代码：

.ancestor { 
    background-color: #ccc;
}

.parent { 
    background-color: #fff;
}

.child {
    /* ??? */
}

如何让 .child 继承 background-color: #ccc; 而不更改 class 声明顺序？

我尝试了 background-color: inherit; 但我得到的只是 background-color 属性.

的完全重置（即没有颜色）

另请注意，我无法更改 .ancestor 和 .parent。

Answer 1

你可以这样做：

.ancestor { 
    background-color: #ccc;
}

.parent { 
    background-color: #fff;
}

.child {
    background-color: #ccc;
}

或者你可以这样做：

.ancestor { 
    background-color: #ccc;
}

.parent { 
    background-color: #fff;
}

.child {
    /* ??? */
}

并且有

html div 或类似这样的东西：

<div class="ancestor child"></div>

Answer 2

这样做就可以了：

.ancestor, .child { 
    background-color: #ccc;
}

.parent { 
    background-color: #fff;
}

你可以做到，

.ancestor { 
    background-color: #ccc;
}

.parent { 
    background-color: #fff;
}

.child {
    background-color: #ccc;
}

How to inherit from ancestor and not parent in CSS?