Question

假设我的基本样式表定义了以下内容：

<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等创建规则并复制样式规则？

Answer 1

我不相信这可以在一个规则中完成，在最简单的层面上，你肯定可以使用：

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

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

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

Answer 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

案例2：大小适用于h两个font-size初始定义。

案例3：添加一个孩子（在这种情况下是一个span）将按照预期考虑父母的font-size

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

CSS：如果它们有某个类，则使标题略大

2 个答案: