html - ページ全体の最初の型 css3

Question

特定の型から最初の要素を取得するにはどうすればよいですか。

h1:first-of-type {
  background: red;
}

<h1>Main Title</h1>
<div class="content">
  <h1>Another Title</h1>
  <div class="para">
    <h1>One More Title</h1>
  </div>
</div>

h1「メインタイトル」 、背景赤を設定したい。問題は、3 つすべてがh1 background:red;

http://jsfiddle.net/EaEFa/

Answer 1

これを試して

CSS

.content h1{
background:none;
}

HTML

<h1>Main Title</h1>
    <div class="content">
        <h1>Another Title</h1>
        <div class="para">
            <h1>One More Title</h1>
        </div>
    </div>

Answer 2

h1の最初のレベル(要素内の最初の型ではなく) のみが必要な場合は、子コンビネーターを使用できます

body > h1 {
    background:red;
}

http://jsfiddle.net/EaEFa/1/

または、それらを組み合わせて最初の 1 つだけを取得することもできます。

body > h1:first-of-type {
    background:red;
}

http://jsfiddle.net/EaEFa/2/

h1もちろん、これは html 構造と、最初の要素がどの要素の子であるかに依存します。

Answer 3

「メインタイトル」h1、背景赤を設定したい。問題は、background:red; の 3 つの「h1」すべてです。

body の直接の子を意味する「最上位」にあるすべての要素の最初の h1 要素のみを選択する場合は、次を使用します。

body > h1:first-of-type

http://jsfiddle.net/EaEFa/3/