html - 使用具有不同 HTML 元素的一个类

Question

我正在尝试简化我的 CSS，但我无法理解为什么我不能将样式应用到具有相同类的不同元素类型。

例如，下面将只设置所有 .forum 元素的样式为 navy，而忽略其他更具体的样式。有解决办法吗？

编辑 http://jsfiddle.net/fWvxs/

HTML

<h1 class="forum">Forum Header</h1>

    <p class="forum">Forum Content</p>

    <small class="forum">Small deets</small>

CSS

.forum {
color: navy;
}

.forum h1 {
    text-decoration: underline;
}

.forum small {
    font-size: 2em;
}

Answer 1

试试这个:

.forum {
  color: navy;
}

h1.forum {
  text-decoration: underline;
}

small.forum {
  font-size: 2em;
}

请注意，您使用了错误的选择器，.forum h1 表示选择 h1，它是 .forum 的一个后代，而 h1.forum 表示选择具有 forum 类的 h1 元素。