[分享]css列表代子列表怎么做

在网页中，列表是常见的需求之一。CSS可以使列表样式更加美观，并且可以嵌套子列表。接下来，我们将介绍如何使用CSS来添加列表和子列表的样式。首先，我们需要添加一个无序列表到HTML文件中： 列表项1 ...

在网页中，列表是常见的需求之一。CSS可以使列表样式更加美观，并且可以嵌套子列表。接下来，我们将介绍如何使用CSS来添加列表和子列表的样式。

首先，我们需要添加一个无序列表到HTML文件中：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3
    <ul>
      <li>子列表项1</li>
      <li>子列表项2</li>
      <li>子列表项3</li>
    </ul>
  </li>
  <li>列表项4</li>
</ul> 

以上代码将创建一个包含4个列表项的无序列表，其中第3个列表项包含一个子列表，该子列表包含3个子列表项。

接下来，我们将使用CSS来为列表和子列表添加样式：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
  padding: 0 0 0 1em;
  position: relative;
}

li:before {
  content: ';
  position: absolute;
  left: -1em;
  top: 0.5em;
  border-radius: 50%;
  width: 0.5em;
  height: 0.5em;
  background-color: #ccc;
}

li > ul {
  display: none;
}

li:hover > ul {
  display: block;
  position: absolute;
  left: 2em;
  top: 0;
}

li > ul > li:before {
  display: none;
} 

在以上代码中，我们应用了如下的样式：

• 将列表样式设置为无样式

• 将列表项的margin和padding设置为0，并对左侧进行一些缩进

• 为列表项添加一个圆点样式并定位到左侧

• 子列表默认不可见，并在鼠标悬停时显示

• 对于子列表的列表项，不需要显示圆点样式

现在，当我们查看网页时，列表和子列表的样式应该已经应用成功了。

总结一下，使用CSS可以为无序列表和子列表添加美观的样式。我们可以利用伪元素和定位来创建圆点，使用hover伪类来显示子列表，并通过编写简短的CSS代码来完成这些操作。