Во-первых, согласно правильному использованию, вложенные h1 должны обрабатываться точно в соответствии с их значением вложенности (включая article, aside, nav, section, но не любые другие элементы). Это правильное поведение. H1, вложенный в элемент section, должен быть визуально таким же, как h2, а h1, вложенный в два элемента section, должен визуально быть таким же, как h3 ... Короче говоря, есть альтернативная разметка, плавающая вокруг, которая почти не -он использует, но на самом деле более семантически непротиворечивый, то есть использует только h1 когда-либо и позволяет определять уровень заголовка по схеме документа.
авторам настоятельно рекомендуется использовать только элементы h1 или
используйте элементы соответствующего ранга для уровня вложенности раздела.
согласно Разделу 4.3.11 WHATWG
Итак, я считаю, что вы на правильном пути, желая этого, и я думаю, что выбранный правильный ответ дает вам субъективный стилистический совет, а не пытается ответить на ваш вопрос, который является действительным.
Что касается реализации:
Для браузеров webkit (chrome и safari) и firefox вы можете использовать псевдоселекторы css "-moz-any" и "-webkit-any". Фактически, вот как стандартные таблицы стилей в Firefox и Chrome стилизуют эти элементы в соответствии с уже существующими стандартами:
Например, на уровне 3 заголовки в Firefox по умолчанию css:
h3, *:-moz-any(article, aside, nav, section) *:-moz-any(article, aside, nav, section) h1 {
display: block;
font-size: 1.17em;
font-weight: bold;
margin: 1em 0;
}
Это значительно упрощает ответ, правильно предложенный Алохчи.
Проблема, конечно, в IE не работает. Одним из вариантов является использование препроцессора CSS, такого как SASS. Я написал следующий фрагмент в SASS, который я использую для разметки заголовка и который используется для эффективной нормализации в браузерах представления вложенных элементов h1. (Если вы не хотите активно использовать препроцессор CSS, вы можете использовать его один раз, чтобы сгенерировать исходный шаблон для этих значений, а затем изменить значения по мере необходимости - это, по крайней мере, сэкономит вам кучу текста и устранить возможные ошибки в процессе):
@function bb_permute_lists($left_list, $right_list) {
$permuted_list: ();
@each $left_item in $left_list {
@each $right_item in $right_list {
$permuted_list: append($permuted_list, $left_item $right_item, comma);
}
}
@return $permuted_list;
}
@function bb_html5_header_markup($level) {
@if (1 == $level) {
@return h1;
}
$header_containers: article, aside, nav, section;
$header_markup: $header_containers;
@for $i from 2 to $level {
$header_markup: bb_permute_lists($header_containers, $header_markup);
}
$header_markup: bb_permute_lists($header_markup, h1);
@return append(h#{$level}, $header_markup, comma);
}
Эту функцию можно использовать следующим образом:
#{bb_html5_header_markup(1)} {
font-size: 2em;
margin: .67em 0;
}
#{bb_html5_header_markup(2)} {
font-size: 1.5em;
margin: .83em 0;
}
Желаем удачи в реализации этого предупреждающего стандарта. Существует много документации об этом альтернативном и более семантическом использовании h1, но, основываясь на том факте, что я не смог найти никого другого с фрагментом кода, который бы помог мне в его реализации, я думаю, что он довольно редко используется (возможно, потому что люди работают с большим количеством смешанного контента, тогда как я начинаю с нуля).