1

我正在定义色块...

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

很容易

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

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

这是我的问题的一个小问题

http://jsfiddle.net/ujrLf/

添加大于号“>”确实可以解决问题，但仅适用于第一级。

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

4

4 回答 4

2

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

这是小提琴！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）。

于 2013-06-27T19:54:53.393 回答
0

使用 > 似乎也可以修复它，即使在更底层的情况下也是如此。看到这个小提琴

.custom1 > h3 {
    color: white;
}
.custom2 > h3 {
    color: #0f0;
}
.custom3 > h3 {
    color: #f0f;
}

您还可以!important在要覆盖所有其他 CSS 命令的行上使用犹豫不决，请参阅评论了解原因，或者您可以进一步提高特异性

于 2013-06-27T19:11:34.073 回答
0

当存在具有相同特定级别的样式时，它们会按照读入的顺序使用。这就是为什么当你有一个“.custom3”包装器时，因为它是样式列表中最后一个读取的，“.custom3 h3”颜色胜过“.custom1 h3”和“.custom2 h3”颜色。

您可以获得的越具体，这些样式的优先级就越高。例如，“.custom3 h3”将比“h3”具有更高的优先级。并且“#content .custom3 h3”将具有更高的优先级。

于 2013-06-27T19:30:07.720 回答
0

为什么需要给 h3 颜色。您可以轻松地为 .custom1 类赋予最终将应用于其所有子级的相同颜色。

你为什么不把 CSS 改成这样呢？

h3 {
    margin: 0;
    text-align: center;
}
[class*='custom'] {
    padding: 5px;
}
.custom1 {
    background: red;
    color: white;
}
.custom2 {
    background: blue;
    color: #0f0;
}
.custom3 {
    background: #000;
      color: #f0f;
}

检查新的小提琴http://jsfiddle.net/ujrLf/4/

于 2013-06-27T19:32:09.100 回答