Полный контроль над списками элементов списка в css - упорядоченные и неупорядоченные списки

Question

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

Решение должно обрабатывать изменения в обоих типах списков.

p.s. Я видел несколько тесно связанных вопросов по этому вопросу и хотел дать исчерпывающее решение (два основных варианта) общей проблемы.

Answer 1

Вариант 1 - <ul> неупорядоченные: заменить оригинальную пулю с вашим собственным

• Потенциал роста: требует мало изменений в коде.
• Недостатки: не контролирует отдельные элементы списка, не работает с упорядоченными списками (см. Вариант 2).

Шаг 1. Сначала избавиться от существующего списка пуль:

ul { 
    list-style: none; 
}

• Основные варианты включают (диск, квадрат, круг)
• Менее Basic - использование изображения: ul { list-style: square inside url("sqpurple.gif"); - try it
• Другой пример img - 16px Spinner bullets (вставить код «попробуйте»):
  list-style: square inside url("http://agroportal.lirmm.fr/assets/spinners/spinner_000000_16px-4f45a5c270658c15e01139159c3bfca130a7db43c921af9fe77dc0cce05132bf.gif");

Шаг 2. добавить замену до сведения элемента списка:

ul li:before { 
     content: "•";  // change what you like 
          // 'before' does not change li styles 

     font-size: 150%;  // a few options 
     padding-right: 5px; 
     color: blue; 
    }

Примечание: это может быть лучше использовать Unicode "\ 002022" вместо "•"

Альтернативно: используйте другой символ, webding, значок-шрифт favicon.ico и т. Д.

ul li:before { 
     content: "4"; font-family:"Webdings"; 
    }

Другой пример: FontAwesome icon - после того, как вы get-started добавить:

• content: "<i class="fa fa-check-circle"></i>" // fontawesome API

Вариант 2 - <ol> упорядоченные списки: сохранить оригинальную нумерацию пункт/буквенное, но ломаются стиль списка из содержания <li> «s с использованием <div> или <span>

• Upsides: работает для упорядоченных списков, контролирует каждый элемент списка индивидуально или коллективно.
• Недостатки: теги для каждого <li>, меньше пулевое управление.

HTML

<ol class="ol--bullet-style"> 
    <li><div class="li--default">Foo</div></li> 
    <li><div class="li--default">Foo</div></li> 
    <li><div class="li--default">Foo</div></li> 
</ol> 

CSS:

.ol--bullet-style { 
    color: red;   // some options 
    font-size: 150%; 
    font-decoration: underline; 
    font-family: Courier New; 
} 

.li--default { 
    font-family: Garamond; 
    font-size: 100%; 
} 

Или идти основной с DIV или тег диапазона, который не включает в себя класс и использовать это в вашем CSS :

ul li div { 
    color: blue; 
} 

ПРИМЕЧАНИЕ: тег <p> не рекомендуется, так как он поставляется со специальными значениями по умолчанию.