Question

HTML5的新大纲结构会导致用户代理在您下降各个部分时使用不同大小的相同标记来呈现标题。有没有办法控制它，最好通过CSS选择器？

我喜欢使用“h1 for everything”方法，因为我可以在不重新标记标题的情况下将部分移入和移出大纲，但我想不出一种方法来控制用户代理的确切样式用于每个级别。

理想情况下，我可以说h1:level1{ font-size: 18pt }之类的东西，它只会更改章节标题，而h1:level2则会选择子章节标题。当然，我可以轻松地使用section h1和section section h1，但我想知道是否有更清洁的东西比重复“部分”更深入我的大纲。

Answer 1

在em s中设置字体大小，然后将section的字体大小设置为1em以下的任何字体。

例如：

section {
    font-size: .9em;
}

h1 {
    font-size: 1.8em;
}

这是小提琴：http://jsfiddle.net/LLhFc/

Answer 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
}

Answer 3

最简单的方法？

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预处理器开放，您可以节省大量的重新输入。这个特殊的混音将涵盖额外的标题排名，而不仅仅是h1。

Sass +指南针：

$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);
    }
}

每个标题排名的风格不同

3 个答案: