Стилизация списков с использованием CSS

CSS li - это селектор, который используется для стилизации элемента списка веб-страницы.

Синтаксис использования CSS li выглядит следующим образом:

li {
  /* стили для элемента списка */
}

Примеры кода:

1) Изменение цвета фона и цвета текста элементов списка:

css
li {
  background-color: yellow;
  color: blue;
}

2) Установка отступов для элементов списка:

css
li {
  margin-left: 20px;
  margin-bottom: 10px;
}

3) Изменение внешнего вида маркера элементов списка:

css
li {
  list-style-type: circle;
}

4) Изменение стиля элементов списка при наведении:

css
li:hover {
  background-color: red;
  color: white;
}

5) Изменение стиля элементов списка в зависимости от их порядкового номера:

css
li:nth-child(even) {
  background-color: lightgray;
}

CSS li можно комбинировать с другими селекторами CSS для более точного выбора элементов списка и применения стилей к ним. Например, селекторы классов, идентификаторов, атрибутов и т.д.

css
ul.my-list li:nth-child(2n+1) {
  font-weight: bold;
}

В этом примере мы выбираем каждый нечетный элемент (1, 3, 5 и т.д.) списка, который находится внутри элемента ul с классом "my-list", и изменяем его начертание на полужирное.

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