css - 在分配它们的 DIV 之外应用 CSS 样式

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;
}

The comma starts a new selector, which in this case made the style apply to all H2 tags, regardless of where they are.