CSS：如果标题具有特定类，则使标题稍大答案

【问题标题】：CSS: Make headings slightly larger if they have a certain classCSS：如果标题具有特定类，则使标题稍大
【发布时间】：2014-03-14 09:15:52
【问题描述】：

假设我的基本样式表定义了当我有类似的东西时：

<h2>My heading</h2>
...
<h3>My other heading</h3>

第一个标题将使用 font-size: 1.5em 和另一个 1.3 em。我想要实现的是，当这些标题有这样的类时：

<h2 class="larger">My heading</h2>
...
<h3 class="larger">My other heading</h3>

两个标题都应该比没有类时的标题大 20%。是否有可能使用单个 CSS 规则以某种方式实现这一点，即：

.larger {
    /* what to put in here? */
}

或者我是否需要分别为h1.larger、h2.larger、h3.larger 等创建规则并复制样式规则？

【问题讨论】：

标签： html css

【解决方案1】：

我不相信这可以在单个规则中完成，在最简单的级别上，您肯定可以使用：

h2.larger{
  font-size:1.8em;
}

h3.larger{
  font-size:1.56em;
}

在这两种情况下，字体大小都是原来的 1.2 倍——尽管这是硬编码的。

【讨论】：

是的，就是这样。 element.class 可以在font-size 使用更大的数字，实际上这很正常。
如果需要指定ONLY ONE元素，也可以使用element#id。

【解决方案2】：

这样不行……

但是您可以为每个 h 添加一个孩子，它会满足您的需求：（底部有说明）

HTML：

<h2>My heading</h2>
<h3>My other heading</h3>
<br>
<br>
<h2 class="larger">My heading</h2>
<h3 class="larger">My other heading</h3>
<br>
<br>
<h2><span class="larger">My heading</span></h2>
<h3><span class="larger">My other heading</span></h3>

CSS：

h2 {
    font-size: 1.5em;
}
h3 {
    font-size: 1.3em;
}
.larger {
    font-size: 130%;
}

案例 1：大小照常应用于h's

案例 2：大小适用于两个 h，而不管它们的 font-size 初始定义。

案例 3：添加一个子项（在本例中为 span）将按照预期服从父项的 font-size

在这里提琴：http://jsfiddle.net/z3ztr/

【讨论】：

这个答案以及@SW4 的答案可能是正确的。在我接受之前，您能否以某种方式合并其他答案？