Блог

Главная - Вопросы по программированию - Повторите нижнюю альфа-букву в списке ol

Повторите нижнюю альфа-букву в списке ol

#html #css

Вопрос:

 <!DOCTYPE HTML>
<html>

<head>
</head>

<body>
  <ol type="1">
    <li> Drinks </li>
    <ol type="a" start="4">
      <li> Milk </li>
      <li> Water </li>
      <li> Coffee </li>
      <li> Tea </li>
    </ol>
    <li> Dessert </li>
    <ol type="A">
      <li> ice cream </li>
      </ul>
    </ol>
</body>

</html>

Я бы хотел, чтобы результат был

1. Напитки
ddd. Молоко
ииии. Вода
fff. Кофе
гггг. Чай

2. Десерт
А. мороженое

Комментарии:

1. Вы пробовали что-нибудь с developer.mozilla.org/en-US/docs/Web/CSS/counter-reset пока?

2. Ваш HTML-код недействителен. Подменю ol должно находиться внутри родительского li элемента .

Ответ №1:

Вы можете использовать что-то вроде этого.

 .repeat-counter li::marker {
  content: counter(list-item, lower-alpha) counter(list-item, lower-alpha) counter(list-item, lower-alpha)". "; 
} 
 <!DOCTYPE HTML>
<html>

<head>
</head>

<body>
  <ol type="1">
    <li> Drinks </li>
    <ol class="repeat-counter" type="a" start="4">
      <li> Milk </li>
      <li> Water </li>
      <li> Coffee </li>
      <li> Tea </li>
    </ol>
    <li> Dessert </li>
    <ol type="A">
      <li> ice cream </li>
      </ul>
    </ol>
</body>

</html>

Объяснение:

::маркер — Здесь мы используем псевдокласс маркера для изменения содержимого маркера.

счетчик(элемент списка,нижний алфавит)— counter(list-item) указывает счетчик текущего элемента, и аргумент lower-alpha преобразует номер счетчика в соответствующий нижний алфавит.

содержание: — Мы меняем содержимое маркера и в том числе counter(list-item,lower-alpha) , чтобы он появлялся трижды.

Также обратите внимание, что я использовал .repeat-counter класс только для выборочного применения этих стилей к этому списку.

Обновить:

::marker имеет некоторые ограничения относительно того, какие стили могут быть применены к нему. На данный момент к нему могут быть применены только следующие свойства.

  • Все свойства шрифта
  • Свойство белого пространства
  • Цвет
  • свойства сочетания текста в вертикальном положении, unicode-bidi и направления
  • Свойство содержимого
  • Все свойства анимации и перехода

Чтобы преодолеть это ограничение стиля , мы можем использовать ::before псевдо-селектор вместо ::marker . Ниже приведен пример:

 .repeat-counter li::before {
    content: counter(list-item, lower-alpha) counter(list-item, lower-alpha) counter(list-item, lower-alpha)". ";
    position: absolute;
    margin-left: -30px;
}
.repeat-counter{
 list-style:none;

} 
 <!DOCTYPE HTML>
<html>

<head>
</head>

<body>
  <ol type="1">
    <li> Drinks </li>
    <ol class="repeat-counter" type="a" start="4">
      <li> Milk </li>
      <li> Water </li>
      <li> Coffee </li>
      <li> Tea </li>
    </ol>
    <li> Dessert </li>
    <ol type="A">
      <li> ice cream </li>
      </ul>
    </ol>
</body>

</html>

Комментарии:

1. Спасибо! Я попробовал, и это сработало. Он повторился точно так, как я хотел, но я заметил, что по умолчанию он выровнен вправо, могу ли я как-нибудь выровнять его влево? Я попытался выровнять текст и дополнить его, но безрезультатно.

Метки: