Css ol list style: list-style-type | htmlbook.ru

Как стилизовать теги «ol» с помощью CSS

Введение

Вот случай, в который я попадаю время от времени: мне нужен упорядоченный список, и я хочу, чтобы он был красивым.

Поскольку семантика HTML важна, я использую проверенный тег

:
1. Stop
2. Drop
3. Roll

Проблема в том, что «пули» (числа префиксов) находятся в CSS — мертвая зона селектора. Невозможно стилизовать их независимо!

Я не из тех, кто принимает апатичные пули. Поэтому я немного покопался и нашел отличное решение 🎉.

У CSS есть довольно изящный трюк, чтобы справиться с этой ситуацией. Имеет встроенный счетчик.

Вот как это выглядит:

Давайте рассмотрим это шаг за шагом:

1. counter-increment — это свойство CSS, которое будет увеличивать определенную переменную «счетчик» всякий раз, когда встречается новый элемент. Мы ставим его на каждый элемент заказанного списка. Я назвал свою переменную «маффины», потому что мне нравятся маффины.
2. Перед каждым элементом заказанного списка я показываю текущее значение счетчика. counter() можно рассматривать как функцию CSS, которая возвращает значение для определенного счетчика. В данном случае кексов .
3. Я удаляю ненастраиваемые маркеры по умолчанию с помощью list-style: none и указываю сброс счетчика. Это гарантирует, что если у меня есть несколько элементов
   на странице, счетчик будет сбрасываться для каждого из них.
   :до??

   В этом трюке используются псевдоэлементы. Псевдоэлемент в CSS — это способ внедрить поддельный элемент до или после основных дочерних элементов элемента. content позволяет указать, что должно быть в этом элементе.

   В этом примере мы добавляем текущий счетчик и немного форматируем (точка и пробел), чтобы имитировать значение по умолчанию или . Смело экспериментируйте с этим!

   С помощью этого CSS мы фактически воссоздали значение по умолчанию

   . Разница в том, что теперь у нас есть селектор CSS, ol li:before , который мы можем использовать для применения пользовательских стилей.

   Вот как выглядят упорядоченные списки в этом блоге, используя этот трюк:

   Ссылка на эту рубрику

   Как испечь торт

   1. Я думаю, что вы делаете что-то с сухими ингредиентами

   2. Миксеры играют роль здесь

   3. Все перемешать, скрестив пальцы

   4. Отправить в печь

   5. Потыкать зубочисткой для удовольствия, а потом подавать

   Это не день и ночь, но я очень доволен общим эффектом!

   Счетчики CSS кажутся функцией следующего поколения, но на самом деле они были примерно навсегда . Они поддерживаются в Internet Explorer 8!!

   Используйте это свойство без вины ✨

   Рабочая группа CSS согласна — они написали проект нового псевдоэлемента ::marker, который позволит вам применять стили непосредственно к маркерам списка.

   К сожалению, это доступно только в Firefox и Safari.

   Кроме того: есть еще одна хитрость, у счетчиков CSS есть свои рукава…

   Вот действительно крутая вещь: у счетчика есть двоюродный брат, счетчики , и он работает для вложенных списков .

   Обратите внимание, как нумерация рекурсивно складывается в этом великолепно звучащем учебном плане:

   Вот необходимый для этого CSS:

   Это очень похоже, за исключением того, что вы используете счетчиков вместо счетчика , и вы добавляете «промежуточный» разделитель (в данном случае точку).

   ol не получил много любви по сравнению с ul . И все же, люди любят считать вещи! Что-то не сходится.

   Возможно, с помощью этого ловкого трюка мы, наконец, увидим, что ol получит то внимание, которого он заслуживает.

   Последнее обновление

   7 апреля 2020 г.

   css — Как сделать так, чтобы OL переопределял стиль списка, который был назначен для соблюдения свойства type

   спросил 5 лет, 7 месяцев назад

   Изменено 5 лет, 7 месяцев назад

   Просмотрено 2к раз

   Ситуация такова, что одна из таблиц стилей, поставляемых с темой, имеет этот ol { list-style: decimal; } . Однако для этой конкретной страницы я хочу, чтобы она использовала стиль, определенный тип свойство элемента ol .

   Например,

    
   
     
   сначала
     
   Второй
   
    

   или

    
   
     
   сначала
     
   Второй
   
    

   Я пробовал ol { list-style: initial} и ol { list-style: inherit} , но безуспешно.

   Может ли кто-нибудь дать мне способ сбросить примененный стиль с помощью CSS?

   • css
   • css-селекторы
   7

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

   list-style-type: initial Тоже не работает, используется для сброса в браузер, а не в значение по умолчанию для темы.

   Так что вам придется написать свой собственный, более конкретный CSS. В этом случае вы можете использовать селекторы атрибутов.

   Тогда результат будет примерно таким:

   HTML

    
   
      
   сначала
      
   Второй
    
    
   
      
   сначала
      
   Второй
    
    

   CSS

    /* Стиль, определенный темой */
   пр {
     стиль списка: десятичный;
   }
   /* Список, определенный вашей страницей */
   ол [тип = 'а'] {
     тип стиля списка: нижняя альфа;
   }
   ол [тип = 'я'] {
     тип стиля списка: нижний роман;
   }
    

   ---

   Вы можете поиграть с этим кодом в codepen (codepen.io/Xopoc/pen/yPQBEM)

   Атрибут type устарел в HTML4 и повторно введен в HTML5 [1]. Его действительно не следует использовать, кроме как в юридических документах. В идеале вы должны переопределить это в CSS. Однако вы можете переопределить атрибут type для упорядоченного списка, поместив разные типы для каждого li [2]:

    
   
     
   первый
     
   Второй
   
    

   Что касается вашего примера, вот скрипт, демонстрирующий работу этой техники:

   https://jsfiddle.