Css 不同的风格为每个标题排名

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

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

理想情况下，我可以说类似h1:level1{font-size:18pt}的内容，这只会更改小节标题，h1:level2则会选择小节标题。诚然，我可以很容易地使用第h1节和第h1节，但我想知道是否有比重复第h1节更干净的内容，可以达到我的大纲深度。

在ems中设置字体大小，然后将您的部分字体大小设置为1em以下

例如：

section {
    font-size: .9em;
}

h1 {
    font-size: 1.8em;
}

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

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

问题是：

在ems中设置字体大小，然后将分区的字体大小设置为1em以下

例如：

section {
    font-size: .9em;
}

h1 {
    font-size: 1.8em;
}

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

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

---

这里是小提琴：

排名是标签名的一部分。没有与标签中的数字无关的等级概念。无论两个标记在文档中的何处，它们的级别都相同

这些元素的排名由其名称中的数字给出。 -

如果您希望对所有内容使用h1，并根据元素在结构中的嵌套程度设置不同的样式，那么最好的做法是根据父元素设置不同的样式

例如：

section {
    font-size: .9em;
}

h1 {
    font-size: 1.8em;
}

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

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

---

等级是标记名的一部分。没有与标签中的数字无关的等级概念。无论两个标记在文档中的何处，它们的级别都相同

这些元素的排名由其名称中的数字给出。 -

如果您希望对所有内容使用h1，并根据元素在结构中的嵌套程度设置不同的样式，那么最好的做法是根据父元素设置不同的样式

例如：

section {
    font-size: .9em;
}

h1 {
    font-size: 1.8em;
}

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

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

最简单的方法

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

最简单的方法

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

---

---

H1代表所有内容都是SEO失败。H1元素被认为排名最高，h6元素排名最低，两个同名元素排名相等。@H1代表所有内容与SEO无关。当你处理诸如包含或联合内容之类的事情时，你不必担心你的标题有不正确的大纲层次结构。请参阅：和@sachleen-…如果它们嵌套在不同的部分中，则不会。在HTML5中，每个部分都有自己的排名。@Sachlen谢谢，我误解了规范的意思是排名随部分块而下降，很明显。H1因为一切都是SEO失败。据说H1元素排名最高，h6元素排名最低，两个同名元素的排名相等，因为所有内容都与搜索引擎优化无关。当你处理诸如包含或联合内容之类的事情时，你不必担心你的标题有不正确的大纲层次结构。请参阅：和@sachleen-…如果它们嵌套在不同的部分中，则不会。在HTML5中，每个节都有自己的等级。@Sachlen谢谢，我显然误解了规范的意思是等级随节块下降。这是一种相当混乱的方法，因为它也会影响节元素的大小。@cimmanon-大概，嵌套节实际上应该与它们的父节具有不同的样式。如果这里不是这样的话，那么我认为首先不应该使用section…是的，它们应该有不同的样式，但你在这里强制它使用字体大小。@cimmanon-我们可以在这个问题上反复讨论，所以我们就不谈了。您总是可以将段落样式增加到几乎原来的位置：p{font size:1.1em}@cimmanon节-更不用说这只会影响ems中指定的字体大小了。因为OP没有在其他地方使用这些元素，所以他们不必担心。这是一种相当混乱的方法，因为它也会影响section元素的大小。@cimmanon-大概是ne

---

sted分区实际上应该与它们的父分区具有不同的样式。如果这里不是这样的话，那么我认为首先不应该使用section…是的，它们应该有不同的样式，但你在这里强制它使用字体大小。@cimmanon-我们可以在这个问题上反复讨论，所以我们就不谈了。您总是可以将段落样式增加到几乎原来的位置：p{font size:1.1em}@cimmanon节-更不用说这只会影响ems中指定的字体大小了。既然OP没有在其他地方使用这些，他们就没什么好担心的了。我不同意。看看这篇文章：那篇文章似乎在说，等级在部分内重置。因此，您可以在另一个分区内的分区中再次使用h1。事实上，用CSS区分它们的唯一方法就是根据它们的父元素来定位它们。我不同意。看看这篇文章：那篇文章似乎在说，等级在部分内重置。因此，您可以在另一个分区内的分区中再次使用h1。事实上，用CSS区分它们的唯一方法是基于它们的父元素来定位它们。