CSS样式应用于分配它们的DIV之外

Question

在我的样式表中，我使用以下代码覆盖了H1和H2的样式： 在我的HTML中，我已将该样式应用于包含H1标记的DIV。

但是，这种风格也适用于有问题的div之后的H1和H2标签。

在这里复制：http://jsfiddle.net/89gkQ/1/

为什么样式应用于div之外的应用程序，以及如何阻止它？

Answer 1

在CSS中，逗号不像英语那样工作：

.featuredtitle h1, h2 {
  color: red;
}

该代码等同于此代码：

.featuredtitle h1 {
  color: red;
}

h2 {
  color: red;
}

这不是你想要的。逗号只允许你编写多个选择器，所以你想要更冗长：

.featuredtitle h1, .featuredtitle h2 {
  color: red;
}

演示：http://jsfiddle.net/89gkQ/2/

Answer 2

问题在于：

.featuredtitle h1,h2 {
    font-size: 1.5em;
    font-weight:bold;
    color:#a00;
}

您应该写下以下内容：

.featuredtitle h1, .featuredtitle h2 {
    font-size: 1.5em;
    font-weight:bold;
    color:#a00;
}

逗号启动一个新的选择器，在这种情况下，该样式适用于所有H2标签，无论它们在何处。