Как правильно использовать counter(), counter-increment() и counter-reset() с вложенными заголовками?
У меня возникают некоторые проблемы с counter-reset(), когда div добавляется между исходным объявлением и сбросом.
Изначально у меня было что-то вроде этого, с заголовками прямо под классом numberedHeadings:
.numberedHeadings {
counter-reset: heading1counter 0 heading2counter 0 heading3counter 0 heading4counter 0;
}
.numberedHeadings h1.chapterHeading {
counter-reset: heading2counter 0 heading3counter 0 heading4counter 0;
counter-increment: heading1counter;
margin-top: 24px;
margin-bottom: 12px;
}
.numberedHeadings h1.chapterHeading::before {
display: inline-block;
padding-right: 8px;
content: counter(heading1counter) " ";
}
/* Repeat similar adjustments for h2, h3, and h4 */
/* Example for h2 */
.numberedHeadings h2.chapterHeading {
counter-reset: heading3counter 0 heading4counter 0;
counter-increment: heading2counter;
margin-top: 24px;
margin-bottom: 12px;
}
.numberedHeadings h2.chapterHeading::before {
display: inline-block;
padding-right: 8px;
content: counter(heading1counter) "." counter(heading2counter) " ";
}<div class = "numberedHeadings">
<h1 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading one (should be 1)
</h1>
<h2 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading two (should be 1.1)
</h2>
<h1 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading three (should be 2)
</h1>
<h2 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading four (should be 2.1)
</h2>
<h2 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading five (should be 2.2)
</h2>
<h1 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading 6 (should be 3)
</h1>
<h1 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading 7 (should be 4)
</h1>
<h1 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading 8 (should be 5)
</h1>
</div>Теперь мне нужно добавить дополнительный контейнер div вокруг каждого тега заголовка, вот так:
.numberedHeadings {
counter-reset: heading1counter 0 heading2counter 0 heading3counter 0 heading4counter 0;
}
.numberedHeadings h1.chapterHeading {
counter-reset: heading2counter 0 heading3counter 0 heading4counter 0;
counter-increment: heading1counter;
margin-top: 24px;
margin-bottom: 12px;
}
.numberedHeadings h1.chapterHeading::before {
display: inline-block;
padding-right: 8px;
content: counter(heading1counter) " ";
}
/* Repeat similar adjustments for h2, h3, and h4 */
/* Example for h2 */
.numberedHeadings h2.chapterHeading {
counter-reset: heading3counter 0 heading4counter 0;
counter-increment: heading2counter;
margin-top: 24px;
margin-bottom: 12px;
}
.numberedHeadings h2.chapterHeading::before {
display: inline-block;
padding-right: 8px;
content: counter(heading1counter) "." counter(heading2counter) " ";
}<div class = "numberedHeadings">
<div class = "settingsControlGroup">
<h1 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading one (should be 1)
</h1>
</div>
<div class = "settingsControlGroup">
<h2 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading two (should be 1.1)
</h2>
</div>
<div class = "settingsControlGroup">
<h1 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading three (should be 2)
</h1>
</div>
<div class = "settingsControlGroup">
<h2 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading four (should be 2.1)
</h2>
</div>
<div class = "settingsControlGroup">
<h2 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading five (should be 2.2)
</h2>
</div>
<div class = "settingsControlGroup">
<h1 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading 6 (should be 3)
</h1>
</div>
<div class = "settingsControlGroup">
<h1 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading 7 (should be 4)
</h1>
</div>
<div class = "settingsControlGroup">
<h1 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading 8 (should be 5)
</h1>
</div>
</div>Однако я вижу, что когда это будет сделано, хотя counter-increment() срабатывает, counter-reset() — нет.
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
1
72
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
ПРИМЕЧАНИЕ. Этот фрагмент, похоже, работает нормально в Edge/Chrome (проверено на Windows 10) и Safari (проверено на iOS 16). Не работает должным образом в Firefox (124 Windows10).
.................................................. .............
Сбросьте/увеличьте счетчик на один уровень.
CSS :has можно использовать, чтобы определить, какой счетчик задействован.
.numberedHeadings {
counter-reset: heading1counter 0 heading2counter 0 heading3counter 0 heading4counter 0;
}
.numberedHeadings .settingsControlGroup:has(h1.chapterHeading) {
counter-reset: heading2counter 0 heading3counter 0 heading4counter 0;
counter-increment: heading1counter;
margin-top: 24px;
margin-bottom: 12px;
}
.numberedHeadings h1.chapterHeading::before {
display: inline-block;
padding-right: 8px;
content: counter(heading1counter) " ";
}
/* Repeat similar adjustments for h2, h3, and h4 */
/* Example for h2 */
.numberedHeadings .settingsControlGroup:has(h2.chapterHeading) {
counter-reset: heading3counter 0 heading4counter 0;
counter-increment: heading2counter;
margin-top: 24px;
margin-bottom: 12px;
}
.numberedHeadings h2.chapterHeading::before {
display: inline-block;
padding-right: 8px;
content: counter(heading1counter) "." counter(heading2counter) " ";
}<div class = "numberedHeadings">
<div class = "settingsControlGroup">
<h1 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading one (should be 1)
</h1>
</div>
<div class = "settingsControlGroup">
<h2 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading two (should be 1.1)
</h2>
</div>
<div class = "settingsControlGroup">
<h1 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading three (should be 2)
</h1>
</div>
<div class = "settingsControlGroup">
<h2 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading four (should be 2.1)
</h2>
</div>
<div class = "settingsControlGroup">
<h2 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading five (should be 2.2)
</h2>
</div>
<div class = "settingsControlGroup">
<h1 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading 6 (should be 3)
</h1>
</div>
<div class = "settingsControlGroup">
<h1 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading 7 (should be 4)
</h1>
</div>
<div class = "settingsControlGroup">
<h1 id = "id-7adcf781-0be8-4536-8dd9-89d4553850cf" class = "chapterHeading">
Heading 8 (should be 5)
</h1>
</div>
</div>Просматривая фрагмент, я все еще вижу проблему с заголовками «четыре» и «пять».
—
09.04.2024 20:05
Странно @Éric, я вижу правильные 2.1 и 2.2. У меня Edge/Windows 10, а вы что используете?
—
09.04.2024 20:07
@ Хауорт, я использую Firefox 124 в Windows 10. Действительно, в Edge все в порядке.
—
09.04.2024 20:19
Странно, я думал, что, должно быть, FF поздно подхватили :has, но 124 должно быть в порядке. Хм, проверю.
—
09.04.2024 20:40
Просто чтобы убедиться, что фрагмент работает нормально в Safari (IOS 16..)
—
09.04.2024 20:42
@Эрик, да, я только что попробовал FF на Win10, и в нем есть ошибка, спасибо, что заметили. Понятия не имею, почему на данный момент я поставлю предупреждение в ответ.
—
09.04.2024 20:46
@AHaworth Спасибо за вашу помощь. Я увеличил его до 4 уровней, но пока не имел возможности протестировать его с FF Win10.
—
09.04.2024 20:54
Видимо, это больше не работает :( по крайней мере, с Chrome/Edge Windows 10. Должно быть, из-за обновления. Протестировано с Chrome: Версия 126.0.6478.62 (официальная сборка) (64-разрядная версия).
—
17.06.2024 10:59
Да, я только что попробовал это на Windows 10 Edge, и это не работает. Как неприятно. Хотя все еще работает на моем Safari (IOS). Не знаю, что теперь предложить.
—
17.06.2024 17:52
Другие вопросы по теме
CSS Grid, неожиданный пробел
Настройте кнопку очистки в kendo-colorpicker
Гибкое направление: столбец; работает по-разному в Chrome и Firefox
Выделение текста жирным шрифтом не работает на разных устройствах
Как заставить динамический список отображать горизонтальную сетку
Смущен приоритетом CSS
SCSS – использование «%» для объявления стиля CSS
Почему моя бесконечная анимация имеет прерывистый перезапуск вместо плавного зацикливания?
Найдите почтовый индекс или название города из веб-формы на карте Google
Оповещение об обновлении JavaFX Стиль расширяемого контента с помощью CSS — кнопка «Больше/Меньше»
Похожие вопросы
Плохой INP при нажатии на внешнюю ссылку
Применение стилей к внутреннему HTML в Angular
Гибкое направление: столбец; работает по-разному в Chrome и Firefox
Как заставить динамический список отображать горизонтальную сетку
Смущен приоритетом CSS
TogglePopover() не открывается, но не закрывает встроенное всплывающее окно HTML
Найдите почтовый индекс или название города из веб-формы на карте Google
Класс добавлен с помощью javascript, но CSS не применен?
Кнопка, не учитывающая высоту родительского div
NG8004: Не найден канал с именем в верхнем регистре. [плагин angular-компилятора]
Когда я запускаю первый фрагмент в Google Chrome версии 123.0.6312.106 (официальная сборка) (64-разрядная версия) в Windows 10, цифры после «должно быть» появляются перед заголовками... Не знаю, в чем проблема.