Упорядоченный список в HTML, который нумеруется с использованием нечетных чисел

Question

С помощью <ol type="1"> в HTML я могу получить упорядоченный список, который будет выглядеть так:

1. я люблю сыр
2. Печенье это хорошо
3. Крем это хорошо...

Как бы я использовал <ol> получить упорядоченный список, чтобы иметь только нечетные нумерации, как это?

1. Мне нравится сыр

3. Еда это хорошо

5. Я желаю звезды...

Answer 1

Я не думаю, что это может быть достигнуто с помощью обычных упорядоченных списков, потому что единственными доступными атрибутами являются следующие (даже включая HTML5):

• тип (указывает тип нумерации)
• начало (указывает начальное значение)
• обратный (указывает, находится ли список в обратном порядке)

Но это может быть достигнуто с помощью счетчиков CSS, как в приведенном ниже фрагменте. Счетчики CSS не новы и имеют очень хорошую поддержку браузера.

---

Реализация этого с помощью счетчиков довольно проста и требует только следующих шагов:

• Создать (сбросить) счетчик, используя counter-reset собственность у родителя. counter-resetСвойство обычно принимает имя счетчика и начальное значение в качестве параметров. Здесь я использовал -1 в качестве начального значения, потому что на каждомliприращение должно быть на 2, а начальное значение должно быть 1 (поэтому -1+2 = 1).
• Увеличивайте значение счетчика на 2 каждый разliвстречается. Это делает счетчик иметь только нечетные значения. Опятьcounter-incrementСвойство также обычно принимает 2 параметра: один - имя счетчика, а другой - значение, на которое оно должно увеличиваться.
• Отобразите значение счетчика перед элементом списка, используя:beforeпсевдоэлемент иcontent имущество.

ol {
  counter-reset: odd-numbers -1;
  list-style-type: none;
}
li {
  counter-increment: odd-numbers 2;
}
li:before {
  content: counter(odd-numbers) ". ";
}

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

---

Другой вариант без установки -1 в качестве начального значения будет использоватьli:first-childСелектор и увеличить счетчик только на 1 (значение по умолчанию, поэтому его не нужно указывать вcounter-increment). Для остальной части li мы можем увеличить его на 2.

ol {
  counter-reset: odd-numbers;
  list-style-type: none;
}
li:first-child {
  counter-increment: odd-numbers;
}
li {
  counter-increment: odd-numbers 2;
}
li:before {
  content: counter(odd-numbers) ". ";
}

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Answer 2

Одним из решений является использование этого правила CSS, которое скрывает четные элементы.

li:nth-child(2n) {
  visibility: hidden;
  position: absolute;
}

Тогда имейте бланк li между четными правилами:

<ol>
<li>1</li>
<li></li>
<li>3</li>
<li></li>
...
</ol>