html - 更改 1 个角色下的 h1 和 h2 文本

Question

我试图让 H1 的行高为 3em，H2 的行高为 2em，但我不确定如果它们在同一名称标签下如何更改它们。你如何像 h1 一样只改变一行？我无法更改 HTML。

HTML:

<section class="intro" id="zen-intro">
        <header role="banner">
            <h1>CSS Zen Garden</h1>
            <h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
        </header>
</section>

CSS:

div[role=h1.banner] {
    /*Change the line-height of h1 to 3em*/
   line-height:3em;
}

div[role=h2.banner] {
    /*Change the line-height of h2 to 2em*/
   line-height:2em;
}

Answer 1

你可以像下面这样写 CSS:

header h1{line-height: 3em;}
header h2{line-height: 2em;}

您不需要添加类“.header”，也不需要更改 HTML。