Aşağıdaki kod parçasında, neden H2 içeriği H1 içeriği daha büyük?

<article>
    <section>
    <header>
        <h1>First Header</h1>
    </header>
    </section>
    <section>
    <header>
        <h2>Second Header</h2>
    </header>
    </section>
</article>

http://jsfiddle.net/abugp/

Neden H1 içerik ama değil aşağıda parçasında büyük üzerindedir?

<h1>First Line</h1>
<h2>Second Line</h2>

http://jsfiddle.net/59T43/

Herhangi stilleri belirtildi değil beri, başlıkların boyutunu tarayıcınızın varsayılan stil sayfası tarafından belirlenir. Özellikle, bu iki başlıkları göreli boyutunu izleyicinin tarayıcı bağlı olarak değişebilir anlamına gelir.

33, ben Krom kemanını bakarak tarif etkisini görmek. Sağ tıkladığınızda başlıkları ve seçme "elemanı Teftiş" konu başlıkları etrafında <article> ve/veya <section> etiketleri varlığı ile neden olduğunu ortaya koymaktadır.

Özellikle Chrome varsayılan stil sayfasını, normalde kurallar içerir:

h1 { font-size: 2em }

ve:

h2 { font-size: 1.5em }

Ancak eski kural daha özel kurallarla <article> ve/veya <section> etiketleri içinde, muhtemelen bölüm başlıkları normalden daha küçük hale getirmek için tasarlanmış geçersiz kılınır "tam sayfa" başlıkları:

:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.5em;
}

:-webkit-any(article,aside,nav,section)
:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.17em;
}

Standart olmayan :-webkit-any(...) seçici muhtemelen sadece etiketleri parantez içinde listelenen herhangi biriyle eşleşir. Etkisi olan herhangi bir <h1> başlıkları içinde bir <article>, <aside>, <nav> veya <section> etiketler azalır boyutu normal <h2> başlık ve herhangi bir <h1> içindeikibu etiketler daha aşağıda <h3> bir normal boyutuna muhtemelen daralmış.

En önemlisi, Chrome varsayılan stil sayfasıyok<h2> etiketler için çok özel kuralları vardır, onlar her zaman (Chrome 33, neyse) aynı boyutta gösterilecek. İki veya daha fazla <article> ve/veya <section> ile çevrili böylece, etiketler, <h1> <h2> daha küçük olur.