Как организовать сквозную нумерацию для неупорядоченных списков?

Question

Спиридон

css

Как организовать сквозную нумерацию для неупорядоченных списков?

Как можно пронумеровать несколько неупорядоченных списков, разделенных параграфами, с использованием только CSS? Учитывая, что у меня практически нет доступа к HTML, поскольку контент динамически загружается из неизвестных систем, хотел бы узнать, возможно ли это реализовать. Например, в следующем коде: 
<pre><code class="html">&lt;p&gt;Писатели:&lt;/p&gt;
&lt;ul&gt;
    &lt;li&gt;Пушкин&lt;/li&gt;
    &lt;li&gt;Лермонтов&lt;/li&gt;
    &lt;li&gt;Чехов&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Художники:&lt;/p&gt;
&lt;ul&gt;
    &lt;li&gt;Винсент ван Гог&lt;/li&gt;
    &lt;li&gt;Сальвадор Дали&lt;/li&gt;
    &lt;li&gt;Эдвард Мунк&lt;/li&gt;
&lt;/ul&gt;</code></pre>
Результат должен выглядеть следующим образом: 
<pre><code>Писатели:
    1. Пушкин
    2. Лермонтов
    3. Чехов

Художники:
    4. Винсент ван Гог
    5. Сальвадор Дали
    6. Эдвард Мунк</code></pre>

20 декабря 2024 г. 8:13

Ответы на вопрос 2

Похожие вопросы

Answer 1

Можно добиться подобной сквозной нумерации для неупорядоченных списков с помощью CSS, используя псевдоэлементы и свойства `counter`. Вот пример, как это можно реализовать:

```css
ul {
    list-style: none; /* Убираем стандартные маркеры списков */
    counter-reset: item; /* Сбрасываем счетчик перед списком */
}

ul li {
    counter-increment: item; /* Увеличиваем счетчик для каждого элемента списка */
}

ul li::before {
    content: counter(item) ". "; /* Добавляем значение счетчика перед текстом элемента */
}

p {
    margin-bottom: 0.5em; /* Отступ между параграфами и списками */
}
```

Для HTML-кода, который вы предоставили, можно использовать этот CSS. Пример полного HTML с применением стилей:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        ul {
            list-style: none; /* Убираем стандартные маркеры списков */
            counter-reset: item; /* Сбрасываем счетчик перед списком */
        }

        ul li {
            counter-increment: item; /* Увеличиваем счетчик для каждого элемента списка */
        }

        ul li::before {
            content: counter(item) ". "; /* Добавляем значение счетчика перед текстом элемента */
        }

        p {
            margin-bottom: 0.5em; /* Отступ между параграфами и списками */
        }
    </style>
</head>
<body>
    <p>Писатели:</p>
    <ul>
        <li>Пушкин</li>
        <li>Лермонтов</li>
        <li>Чехов</li>
    </ul>
    <p>Художники:</p>
    <ul>
        <li>Винсент ван Гог</li>
        <li>Сальвадор Дали</li>
        <li>Эдвард Мунк</li>
    </ul>
</body>
</html>
```

Однако, как вы отметили, если у вас есть доступ только к CSS и HTML не может быть изменён (например, контент загружается динамически), вам нужно будет убедиться, что ваши списки находятся в правильной структуре. Например, если разные списки `ul` находятся в разделе, так как в примере, используемом выше, они будут иметь отдельные счетчики.

Если вам нужно связать все списки в один последовательный номер, потребуется немного более сложная структура, или работа с JavaScript, так как стандартный CSS ограничивает нумерацию по-подобному в рамках элемента. 

Если ограничения на различные элементы не фиксированы и возможно пересекаться в пределах одних списков, тогда можно использовать JavaScript для добавления класса или непосредственно изменения разметки, чтобы решить именно вашу задачу.

Answer 2

В этом участке кода получилось добиться сквозной нумерации таким кодом: <br/> <pre><code class="css">ul:first-of-type {
  counter-reset: cnt 0;
}

li {
  counter-increment: cnt 1;
}

li::before {
  content: counter(cnt) ". ";
}</code></pre>