Не могли бы вы помочь мне создать упорядоченный список, в котором самые верхние элементы списка упорядочены как 1.0, 2.0, 3.0 и т. Д.

Вот существующая скрипка - http://jsfiddle.net/PTbGc/632/

Список css, который я использую,

OL { counter-reset: item; padding-left: 10px; } LI { display: block; } LI:before { content: counters(item, ".") " "; counter-increment: item }

Подсписки упорядочены правильно. Я просто хочу, чтобы верхние списки заканчивались на .0

Спасибо.

1
Lee Colarelli 16 Фев 2018 в 21:20

1 ответ

Лучший ответ

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

Изменить: поскольку есть много людей, которые предпочитают классы прямым тегам html (включая меня), я создал другую скрипку < / a>, который показывает концепцию классов css. Лучшим решением было бы смешать оба метода вместе как в этой скрипке, я бы так использовать.

CSS - это

/* selector for the first level of the nested list */
BODY > OL {
  /* reset the item counter when a new nested list starts
     e.g. everytime there is a <ol> tag as a direct child of the <body> */
  counter-reset: item;
  padding-left: 10px;
}

/* selector for the list items on the first level */
BODY > OL > LI::before {
  /* prepend X.0 to the content of every list item that is a direct 
     child of <ol> which is a direct child of the <body> */
  content: counter(item) ".0 ";
  counter-increment: item
}

/* selector for all sublists */
LI > OL {
  padding-left: 10px;
  /* when entering a new sublist reset the subitem counter */
  counter-reset: subitem;
}

/* selector for the items of in every sublist */
LI > OL > LI::before {
  /* prepend the current value of the item counter and the subitem
     counters to the content of each <li> tag in a sublist. */
  content: counter(item) "." counters(subitem, ".") " ";
  counter-increment: subitem
}
3
K. Tippenhauer 18 Фев 2018 в 03:47