html - 仅在某些类别内更改 H1 的颜色

Question

我遇到以下问题。如果 h1、h2、h3... 属于某些类，我希望它们的颜色有所不同。这工作正常，但对于具有该类的 div 或表格上方或下方的代码，标题的颜色并不总是恢复为原始颜色。我怎样才能实现这个目标？这是我的代码:

CSS:

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

如果这些类中有 h1、h2 等，我希望这是颜色 - 白色矩形和附加项。对于所有其他实例，我有以下内容:

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>

fiddle :http://jsfiddle.net/y5hg8ke5/

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

Answer 1

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