Блог

Главная - Вопросы по программированию - Стиль ol и li по умолчанию с разными маркерами и цветом номера

Стиль ol и li по умолчанию с разными маркерами и цветом номера

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я хочу сделать этот стиль ol и ul таким же, как на этом изображении. Я хочу сделать это по умолчанию. Мне не нужен никакой другой тег в li.

Кто-нибудь может мне помочь в этом.

введите описание изображения здесь
введите описание изображения здесь

 ul li {
  color: blue;
}
ol {
  list-style: none;
  counter-reset: item;
}
ol li {
  counter-increment: li;
}
ol li::before {
  content: counter(item) ". ";
  counter-increment: item;
  color: red;
}  
 <ul>
  <li>Item one of five</li>
  <li>Item two of five, Item two of five, Item two of five, Item two of five, Item two of five:
    <ul>
      <li>Sub-item one</li>
      <li>Sub-item two</li>
    </ul>
  </li>
  <li>Item three of five</li>
  <li>Item four of five, Item four of five, Item four of five, Item four of five</li>
</ul>
<ol>
  <li>Item one of five</li>
  <li>Item two of five, Item two of five, Item two of five, Item two of five, Item two of five:
    <ol>
      <li>Sub-item one</li>
      <li>Sub-item two</li>
    </ol>
  </li>
  <li>Item three of five</li>
  <li>fdddItem four of five, Item four of five, Item four of five, Item four of five</li>
</ol>

orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also

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

1. Это может помочь: css-tricks.com/custom-list-number-styling

Ответ №1:

 ul, ol {
  list-style: none;
}
li::before {
  font-family: serif;
  color: red;
}
ul li::before {
  content: "● ";
}
ol li {  
  counter-increment: item;
}
ol li::before {  
  content: counter(item) ". ";
}
li li {
   counter-reset: item;
}
li li::before {
  content: "⚬ ";
}

Надеюсь, этот фрагмент задал стиль, как вы ожидали.
Оформить заказ https://jsfiddle.net/moorthyrweb/u27cfzmo