在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。