[分享]css列表子列表边框

在 CSS 中，我们可以使用列表 (List) 和子列表 (Nested List) 来展示信息，以便让用户更加方便的浏览。在这些列表中，我们也可以使用 CSS 来显示边框，以增强页面的视觉效果。/ ...

在 CSS 中，我们可以使用列表 (List) 和子列表 (Nested List) 来展示信息，以便让用户更加方便的浏览。在这些列表中，我们也可以使用 CSS 来显示边框，以增强页面的视觉效果。

/* 显示列表边框 */
ul {
  border: 2px solid #333333;
  padding: 10px;
}

/* 显示子列表边框 */
ul ul {
  border: 2px solid #666666;
  padding: 5px;
} 

在以上的 CSS 代码中，我们首先通过 ul 选择器来表示我们的列表，然后加上 border 属性来设置边框的样式、大小和颜色。同时，我们也加上了 padding 属性来设置列表的内边距，以让文字和边框之间保持一定的距离。

接下来，我们使用 ul ul 选择器来表示我们的子列表。一样的，我们也加上了 border 属性来设置边框。由于子列表的样式可能会影响到父级列表，我们也需要加上 padding 属性来缩小子列表和父级列表之间的距离。

通过以上的 CSS 样式，我们就能够让列表和子列表在页面上更加清晰可见，用户也可以更加方便的找到他们需要的信息。