1

HTML5 の新しいアウトライン構造により、ユーザー エージェントは、セクションを下っていくときに、同じタグを使用してさまざまなサイズの見出しをレンダリングします。できればCSSセレクターを介して、これを制御する方法はありますか?

見出しにタグを付け直すことなくセクションをアウトラインの内外に移動できるので、「すべてに h1」アプローチを使用するのが好きですが、ユーザー エージェントがそれぞれに使用するスタイルを正確に制御する方法が思いつきません。レベル。

h1:level1{ font-size: 18pt }理想的には、セクションの見出しのみを変更しh1:level2、サブセクションの見出しを選択する のようなことを言うことができます。確かに、 と を同じように簡単に使用できますが、私のアウトラインと同じくらい深い「セクション」を繰り返すよりもクリーンなものがあるかどうか疑問に思っていますsection h1。section section h1

4

3 に答える 3

4

フォント サイズをems で設定してから、sectionの font-size を 未満に設定します1em。

例えば：

section {
    font-size: .9em;
}

h1 {
    font-size: 1.8em;
}

これがフィドルです：http://jsfiddle.net/LLhFc/

于 2013-01-22T18:44:24.423 に答える
2

最も簡単な方法は？

h1 { font-size: 2em }

section h1 { font-size: 1.8em }

section section h1 { font-size: 1.6em }

section section section h1 { font-size: 1.4em }

記事 (またはセクションと記事の任意の組み合わせ) でこれを機能させる必要がある場合は、それらの組み合わせも追加する必要があります (非常に長いセレクターになる可能性があります)。

CSS プリプロセッサーを使用できる場合は、多くの再入力を省くことができます。この特定の mixin は、h1 だけでなく、追加の見出しランクのケースをカバーします。

サス + コンパス:

$gh-selectors: 'section, article' !default;
@mixin graduated-headlines($hn: 1, $sizes: 2em 1.8em 1.4em 1.2em 1em .8em) {
    $sel: $gh-selectors;
    @for $i from 1 through length($sizes) {
        #{$sel} {
            @for $j from 1 through $hn {
                @if $i + $j - 1 <= length($sizes) {
                    h#{$j} {
                        font-size: nth($sizes, $i + $j - 1);
                    }
                }
            }
        }
        $sel: nest($sel, $gh-selectors);
    }
}
于 2013-01-22T18:59:43.413 に答える
2

ランクはタグ名の一部です。タグの数字に依存しないランクという概念はありません。ドキュメント内の場所に関係なく、 2 つの<h1>タグのランクは同じです。

これらの要素のランクは、名前に含まれる数字で表されます。- http://www.w3.org/TR/html5/sections.html#rank

すべてに h1 を使用し、要素が構造内でどれだけネストされているかに応じてスタイルを変えたい場合は、親要素に応じてスタイルを変えるのが最善です。

例えば：

<section class"rank1">
   <h1>Heading of Rank 1</h1>
</section>

<section class"rank2">
   <h1>Heading of Rank 2</h1>
</section>

そしてCSSをそのまま使用します：

.rank1 h1 {
// make it big
}

.rank2 h1 {
// make it smaller
}
于 2013-01-22T18:46:29.497 に答える