CSS Cascade 帮助 - 需要子级覆盖父级

Question

我正在定义色 block ...

.custom1 {
    background: red;
}
.custom1 h3 {
    color: white;
}
.custom2 {
    background: blue;
}
.custom2 h3 {
    color: #0f0;
}
.custom3 {
    background: #000;
}
.custom3 h3 {
    color: #f0f;
}

很简单

当我的 block 相互嵌套时，我的问题就出现了。

H3 的最顶层父包装器声明覆盖了 H3 的子包装器声明(这对我来说似乎不正确)

这是我的问题的一个 fiddle

http://jsfiddle.net/ujrLf/

添加大于号“>”确实解决了问题，但仅限于第一级。

我如何强制子元素声明覆盖父元素？

Answer 1

感谢所有尝试过的人。这是我要使用的解决方案...

这是 fiddle ! http://jsfiddle.net/4wAtz/1/

.custom1 {
    background: red;
}
.custom1 h3, 
[class*='custom'] .custom1 h3,
[class*='custom'] [class*='custom'] .custom1 h3,
.and-so-on, .and-so-on, .and-you-get-it
{
    color: white;
}
.custom2 {
    background: blue;
}
.custom2 h3, 
[class*='custom'] .custom2 h3,
[class*='custom'] [class*='custom'] .custom2 h3
{
    color: #0f0;
}
.custom3 {
    background: #000;
}
.custom3 h3, 
[class*='custom'] .custom3 h3,
[class*='custom'] [class*='custom'] .custom3 h3
{
    color: #f0f;
}

它没有我想要的那么优雅，但它确实有效!我只需要推断出我能看到的尽可能多的级别(加 1)。