使用 CSS Reset 后列表样式失效的问题解决方案

背景

在前端开发中，我们经常会使用 CSS Reset 来统一不同浏览器的默认样式，以便更好地控制页面样式。然而，使用 CSS Reset 后，我们可能会发现原本设置的列表样式（如有序列表和无序列表）被清除了，变得不可见了。

原因

这是因为 CSS Reset 会将所有元素的默认样式都清除掉，包括列表样式。因此，我们需要重新设置列表样式。

解决方案

1. 使用 :before 和 content 属性

我们可以使用 :before 和 content 属性来设置列表样式，如下所示：

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

li:before {
  content: "•";
  margin-right: 10px;
}

这段代码会将无序列表的默认样式清除，并在每个列表项前面添加一个黑色圆点。

对于有序列表，我们可以使用 counter 和 content 属性，如下所示：

ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: item;
}

li:before {
  counter-increment: item;
  content: counter(item) ".";
  margin-right: 10px;
}

这段代码会将有序列表的默认样式清除，并在每个列表项前面添加一个序号。

2. 使用自定义图片

我们也可以使用自定义图片来替代默认的列表样式，如下所示：

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

li {
  background-image: url("bullet.png");
  background-repeat: no-repeat;
  background-position: 0 5px;
  padding-left: 20px;
}

这段代码会将无序列表的默认样式清除，并在每个列表项前面添加一个自定义图片。

对于有序列表，我们可以使用类似的方法，如下所示：

ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: item;
}

li {
  background-image: url("number.png");
  background-repeat: no-repeat;
  background-position: 0 5px;
  padding-left: 20px;
}

li:before {
  counter-increment: item;
  content: counter(item) ".";
  margin-right: 10px;
}

这段代码会将有序列表的默认样式清除，并在每个列表项前面添加一个自定义图片和序号。

总结

使用 CSS Reset 后，列表样式可能会失效。为了解决这个问题，我们可以使用 :before 和 content 属性，或者自定义图片来重新设置列表样式。这些方法可以让我们更好地控制列表样式，使页面更加美观和易读。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658bf34aeb4cecbf2d142ad9