如何从CSS中继承祖先而不是父级？

Question

这是我的代码：

.ancestor { 
    background-color: #ccc;
}

.parent { 
    background-color: #fff;
}

.child {
    /* ??? */
}

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

我尝试了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;
}