仅在某些类中更改H1的颜色

Question

我有以下问题。如果它们在某些类中，我希望h1，h2，h3 ......颜色不同。这工作正常，但对于具有该类的div或表上方或下方的代码，标题的颜色并不总是恢复为原始颜色。我怎样才能做到这一点？这是我的代码：

CSS：

.white_rectangle,.extras h1,h2,h3,h4,h5,h6{
    color: navy;
}

如果我在这些类中有h1，h2等，我希望这是颜色 - white_rectangle和extras。 对于所有其他实例，我有以下内容：

h1, h2, h3, h4, h5, h6 { color: red; font-weight: normal }

HTML：

<h1>Before</h1>
<h3>Before</h3>

<table class='extras'>
    <tr><td><h1>Text Inside Class</h1></td></tr>
</table>

<h1>After</h1>
<h2>After</h2>

小提琴：http://jsfiddle.net/y5hg8ke5/

我希望文本“之前”和“之后”为红色，但它似乎无法正常工作。

Answer 1

.white_rectangle,
.extras h1,
.extras h2,
.extras h3,
.extras h4,
.extras h5,
.extras h6 {
    color: navy;
}

Answer 2

使用:any伪类。

.white_rectangle, .extras :any(h1, h2, h3, h4, h5, h6) {
    color: navy;
}

但是，在实践中，您需要使用以供应商为前缀的版本-moz-any和-webkit-any，因此它可能无法为您节省太多打字。 不将这些组合在一个规则中，如

.white_rectangle, .extras :-moz-any(h1, h2...), .extras :-webkit-any(h1, h2...)

因为其他浏览器会因无法识别的供应商前缀伪类而使整个规则无效。而是单独指定它们：

.white_rectangle { color: navy: }
.extras :-webkit-any(h1, h2, h3, h4, h5, h6) { color: navy; }
.extras :   -moz-any(h1, h2, h3, h4, h5, h6) { color: navy; }

你在IE和Opera上运气不好。 见https://developer.mozilla.org/en/docs/Web/CSS/:any。该页面的注释（感谢@HashemQolami）：

  

注意：此伪类正在名称:matches()中的CSS选择器级别4中进行标准化。 <{1}}的语法和名称可能会在不久的将来更改以反映它。

Answer 3

您需要将主“h1，h2 ...”包含在每个选择器中（.extras）。

所以：

.white_rectangle,.extras h1,.extras h2,.extras h3,.extras h4,.extras h5,.extras h6 { 
   color: navy; 
}

Answer 4

请参阅此fiddle

我已经按如下方式更改了CSS 的 CSS

h1,h2,h3,h4,h5,h6 { color: red; font-weight: normal }

.white_rectangle,.extras h1,.extras h2,.extras h3,.extras h4,.extras h5{
    color: navy;
}

这里我只在.extras内选择了标题（h1，h2，h3，h4，h5，h6）。

Answer 5

这是因为您将所有标题设置为color: navy，即使它们不在.extras范围内。

这是正确的方法：

.extras h1, .extras h2, .extras h3,.extras h4, .extras h5, .extras h6 {
    color: navy; 
}