Предотвратить ноль во вложенном упорядоченном списке при использовании счетчиков css
Я создаю вложенный упорядоченный список HTML (нумерованный). Я пытаюсь добиться того же макета, что и в MS Word, когда вы нажимаете Tab перед нумерованным элементом списка. Бывший:
1. Item at top
1.1.1.1. Item at middle
2. Item at bottom
На данный момент у меня есть следующий CSS, который устанавливает 1.0.0.1 для Item at middle.
Есть ли способ исправить это с помощью CSS и без изменения HTML?
ol { counter-reset: itemCounter; padding-left: 0 }
ol li { list-style: none; }
ol li:not(:has(ol)):before {
content: counters(itemCounter, ".") ". ";
counter-increment: itemCounter;
}<ol>
<li>Item at top</li>
<li>
<ol>
<li>
<ol>
<li>
<ol>
<li>Item at middle</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
<li>Item at bottom</li>
</ol>Похоже, что это неправильное место для этого: CSS, но мое мнение здесь равно 0. Я всегда сомневаюсь в использовании этих тегов, когда вы устанавливаете list-style: none; - почему бы не использовать настоящие теги, предназначенные для использования, и не нужно принудительно заполнять слева и т. д.
@MarkSchultheiss эти теги имеют семантическое значение, а также некоторые функции доступности. Вы должны использовать их, но в большинстве случаев мы хотим, чтобы они отличались от поведения по умолчанию.
Часть проблемы заключается в том, что первая 1 второй строки уже должна быть 2, если вы действительно считали это на верхнем li уровне. (И 2 в следующей строке должен быть 3.) Но вы, очевидно, хотите подсчитать только первый и третий верхний уровень li и «опустить» второй (?).
@TemaniAfif Справедливое замечание о семантическом значении и на самом деле одна из моих проблем с использованием <i> Я вижу, что он используется / украден только потому, что он «короче», чем <span> (не является частью ЭТОГО вопроса, чтобы быть ясным)
@MarkSchultheiss Я не использую настоящие теги, потому что дерево отличается от того, что HTML предполагает вложенными списками. Чтобы использовать настоящие теги, мне придется изменить html, чтобы Item at middle был внутри первого тега li.
@CBroe У меня есть теги 3ol во втором прямом li корня. Это означает, что я добавляю три раздела для счетчика. Первый элемент должен быть номером 1. Так что разделы root+3 должны быть 1.1.1.1
Это не меняет того факта, что у вас есть три li на верхнем уровне ol, которые обычно считаются как 1, 2, 3, но вы, очевидно, хотите, чтобы они «считались» как 1, 1, 2.
@CBroe хорошо, в эти дни мы видим много доказательств того, что номальный отличается 😊 Я имею в виду MS Word, который обеспечивает ожидаемое мной поведение за последние несколько десятилетий.
@AlexeyVictorov Я не думаю, что MS Word использует внутреннюю структуру, в которой второй элемент пропускается из подсчета, если у него есть содержимое, я бы поспорил, что на самом деле наоборот. Я думаю, CBroe предлагает вам использовать неправильную структуру для представления того, что вы хотите. Если вы введете новый дочерний элемент в элемент, он должен быть внутри, а не после, это просто логика и решит проблему совместимости использования not(:has(ol))
@Kaddath Я полностью согласен. Предполагаемый способ отображения вложенных списков в HTML отличается от дерева, которое у меня есть. Я понимаю, что правильный путь будет - выравнивание дерева по стандарту HTML. Мне было интересно, можно ли добиться ожидаемой нумерации без изменения HTML, просто с помощью CSS
Ответы 2
С этой модификацией вложенный элемент ol будет начинаться с «1» вместо «0», и нумерация продолжится оттуда.
ol {
counter-reset: itemCounter;
padding-left: 0;
}
ol li {
list-style: none;
}
ol li:not(:has(ol)):before {
content: counters(itemCounter, ".") ". ";
counter-increment: itemCounter;
}
ol ol {
counter-reset: itemCounter 1; /* initialize counter to 1 */
padding-left: 1.5em;
}<ol>
<li>Item at top</li>
<li>
<ol>
<li>
<ol>
<li>
<ol>
<li>Item at middle</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
<li>Item at bottom</li>
</ol>Я думаю, вы неправильно поняли вопрос.. речь идет о числах для списка, а не о пробелах.
@Kaddath, я отредактировал это. Дайте мне знать, если это правильно.
Я позволю ОП быть судьей, ни один из текущих ответов не работает для Firefox, кстати, я не понизил голос
Item at middle должно быть 1.1.1.1.
@Kaddath, если это правильное решение, я добавлю совместимость с Firefox.
Кажется, это работает так, как вам нужно:
ol { counter-reset: itemCounter; padding-left: 0 }
ol li { list-style: none; }
ol li:not(:has(ol)):before {
content: counters(itemCounter, ".") ". ";
counter-increment: itemCounter;
}
ol>li:has(ol) {
counter-increment: itemCounter 0;
}
ol>li ol li:has(ol) {
counter-increment: itemCounter 1;
}<ol>
<li>Item at top</li>
<li>
<ol>
<li>
<ol>
<li>
<ol>
<li>Item at middle</li>
<li>Item at middle</li>
</ol>
</li>
</ol>
</li>
<!-- a few li for testing 👇 -->
<li>
<ol>
<li>
<ol>
<li>Item at middle</li>
</ol>
</li>
<li>
<ol>
<li>Item at middle</li>
<li>Item at middle</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
<li>Item at bottom</li>
</ol>
Просто примечание: ваш код не работает в Firefox (вообще нет цифр), возможно, из-за
:has?