Заголовок тега, вмешивающийся в заголовки css counters

При использовании обычного способа добавления номеров разделов в заголовки с помощью счетчиков CSS я сталкиваюсь с проблемами при использовании тега header.Заголовок тега, вмешивающийся в заголовки css counters

Это каким-то образом, кажется, мешают counter (ов)

body { 
 
    counter-reset: h1 
 
} 
 
h1 { 
 
    counter-reset: h2 
 
} 
 
h2 { 
 
    counter-reset: h3 
 
} 
 
h1:before { 
 
    counter-increment: h1; 
 
    content: counter(h1)". " 
 
} 
 
h2:before { 
 
    counter-increment: h2; 
 
    content: counter(h1)"." counter(h2)". " 
 
} 
 
h3:before { 
 
    counter-increment: h3; 
 
    content: counter(h1)"."counter(h2)"." counter(h3)". " 
 
}

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <title>Headings counting</title> 
 

 
</head> 
 

 
<body> 
 
    <header> 
 
    <h1>First chapter</h1> 
 
    </header> 
 
    <h2>Sub Chapter</h2> 
 
    <h2>Sub Chapter</h2> 
 
    <h2>Sub Chapter</h2> 
 
    <h3>Sub sub section</h3> 
 
</body> 
 

 
</html>

выход:

Первая глава
1.1. Sub Chapter
1.1. Sub Chapter
1.1. Подраздел
1.0.1. Sub подразделы

после удаления header тега output is as expected:

1. Первой глава
1,1. Sub Chapter
1.2. Подпункт
1.3. Подраздел
1.3.1. Подраздел

Следует ли использовать знак header вокруг H1 или нет? Он делает это на Firefox & Edge, а не на Chrome & Opera

источник

2016-09-05 ingo

Просто замените/добавить header правилу counter-reset в h1 декларации, в зависимости, если вы собираетесь иметь h1 с или без header тега.

body { 
 
    counter-reset: h1 
 
} 
 

 
header { /* add h1 if you going to use h1 without header tag */ 
 
    counter-reset: h2 
 
} 
 
h2 { 
 
    counter-reset: h3 
 
} 
 
h1:before { 
 
    counter-increment: h1; 
 
    content: counter(h1)". " 
 
} 
 
h2:before { 
 
    counter-increment: h2; 
 
    content: counter(h1)"." counter(h2)". " 
 
} 
 
h3:before { 
 
    counter-increment: h3; 
 
    content: counter(h1)"."counter(h2)"." counter(h3)". " 
 
}

<header> 
 
    <h1>First chapter</h1> 
 
</header> 
 
<h2>Sub Chapter</h2> 
 
<h2>Sub Chapter</h2> 
 
<h2>Sub Chapter</h2> 
 
<h3>Sub sub section</h3>

источник

2016-09-05 10:48:38 dippas

Спасибо! Это решает мою проблему. Но каково правильное поведение браузера? – ingo

Заголовок тега, вмешивающийся в заголовки css counters

ответ

Смежные вопросы