1

HTML5 的新大纲结构使用户代理在您向下浏览部分时使用相同的标签以不同的大小呈现标题。有没有办法控制这个，最好是通过 CSS 选择器？

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

理想情况下，我可以说类似h1:level1{ font-size: 18pt }，这只会更改部分标题并h1:level2选择子部分标题。诚然，我可以很容易地使用section h1and section section h1，但我想知道是否有比重复“部分”更清晰的东西，就像我的大纲一样深。

4

3 回答 3

4

将您的字体大小设置为ems，然后将您section的字体大小设置为1em.

例如：

section {
    font-size: .9em;
}

h1 {
    font-size: 1.8em;
}

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

于 2013-01-22T18:44:24.423 回答
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 回答
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。

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);
    }
}
于 2013-01-22T18:59:43.413 回答