Question

所有我希望从red到pink的DIV被涂成红色，DIV从pink到red变成粉红色。但这不起作用（一切都是红色）：

<!DOCTYPE HTML>
<html>
<head>
<style>
div {
    display: inline-block;
    padding: 50px;
    background: yellow;
    border: solid 1px black;
}

.pink div {
    background: pink;
}

.red div {
    background: red;
}
</style>
</head>
<body>

<div class="red">
    <div>
        <div>
            <div>
                <div>
                    <div class="pink">
                        <div>
                            <div>
                                <div class="red">
                                    <div>
                                        <div>
                                            <div>
                                                <div class="pink">
                                                    <div>
                                                        <div>
                                                            <div>
                                                                <div>
                                                                    <!-- and so on -->
                                                                </div>
                                                            </div>                                      
                                                        </div>
                                                    </div>                                              
                                                </div>
                                            </div>                                      
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

我知道为什么它不起作用，但现在我正在寻找解决方案。请提出建议，只要：

它是纯CSS;
不需要定义ID;
它适用于任何数量的DIV;
可以为任何DIV定义类名（red和pink）。

Answer 1

EDITED

background: inherit是你的朋友。由于背景通常不会继承。

div {
    display: inline-block;
    padding: 10px;
    background: yellow;
    border: solid 1px black;
}

div div {
    background: inherit;
}

.red {
    background: red;
}

.pink {
    background: pink;
}

http://jsfiddle.net/pU6Ds/2

现在将它们滑到一边以证明每个人都有一个不透明的背景：

http://jsfiddle.net/pU6Ds/1/

Answer 2

您可以使用以下内容，其中最重要的部分是常规div的默认background-color: transparent;，允许background-color，.pink和{{1 divs，透过：

.red

JS Fiddle demo

选择器的CSS问题

2 个答案: