LI怎么设置CSS_CSS美化列表与自定义LI样式教程

<ul>

<ol>

<li>

<li>

ul, ol {
  list-style: none; /* 移除项目符号 */
  padding: 0; /* 移除默认内边距 */
  margin: 0; /* 移除默认外边距 */
}

li {
  list-style-image: url("path/to/your/image.png");
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

li::before {
  content: "\f00d"; /* Font Awesome叉号 */
  font-family: FontAwesome;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%; /* 创建圆形 */
  margin-right: 5px;
}

li:hover {
  background-color: #f0f0f0; /* 鼠标悬停时背景颜色改变 */
  cursor: pointer; /* 鼠标变成手型 */
}

li {
  border-bottom: 1px solid #ccc; /* 底部添加分隔线 */
  padding-bottom: 5px; /* 增加底部内边距，避免文字紧贴分隔线 */
  margin-bottom: 5px; /* 增加底部外边距，分隔线之间留出间距 */
}

li:last-child {
  border-bottom: none; /* 移除最后一个列表项的分隔线 */
}

li:nth-child(odd) {
  background-color: #f9f9f9; /* 奇数列表项的背景色 */
}

li:nth-child(even) {
  background-color: #fff; /* 偶数列表项的背景色 */
}

:nth-child()

li {
  margin-bottom: 10px; /* 列表项底部外边距 */
  padding: 5px; /* 列表项内边距 */
}

margin

padding