[分享]css3把默认li样式去掉

CSS3 把默认 li 样式去掉 在 HTML 中，列表是我们常用的标签之一。但是，对于一些有特殊样式要求的网页来说，HTML 默认的列表样式就显得过于简单，这时候我们就需要用到 CSS3 技术来对列...

CSS3 把默认 li 样式去掉

在 HTML 中，列表是我们常用的标签之一。但是，对于一些有特殊样式要求的网页来说，HTML 默认的列表样式就显得过于简单，这时候我们就需要用到 CSS3 技术来对列表样式进行定制化。

在默认情况下，ul 和 ol 标签内的每一个 li 都会有一个默认的样式。ul 标签的默认样式为实心圆点，ol 标签的默认样式为数字（1, 2, 3...）。

/* 默认的 ul 标签样式 */
ul {
  list-style: disc;
}

/* 默认的 ol 标签样式 */
ol {
  list-style: decimal;
} 

如果你想把这些默认样式去掉，可以通过给 ul 和 ol 标签添加 list-style: none; 属性来实现。这样做之后，所有的 li 项都会去除默认的样式。

/* 去掉 ul 标签的默认样式 */
ul {
  list-style: none;
}

/* 去掉 ol 标签的默认样式 */
ol {
  list-style: none;
} 

除了去掉默认样式外，我们还可以用 CSS3 技术来设置自己想要的样式。比如，下面这段代码可以将 ul 列表项的样式设置成为实心圆点，而不是默认的空心圆点。

/* 定制化 ul 标签的样式 */
ul {
  list-style: none;
  padding-left: 0;
}

li:before {
  content: "●";
  color: #999;
  font-size: 16px;
  margin-right: 5px;
} 

在上面的代码中，我们先去掉了 ul 的默认样式，并将其内部的 padding-left 设为了 0，以免实心圆点与文字之间出现多余的空隙。接着，我们使用:before 伪类来创建了一个带颜色与大小的实心圆点，并在其右侧添加了一些间距。

如果想让 ol 列表项的样式变为带括号的数字，只需要将 list-style: none; 改为 list-style: decimal;，再使用:before 伪类来挂在左侧带括号的数字即可。

总之，用 CSS3 技术来定制化列表项的样式是非常简单的，只需要灵活运用相关的 CSS 属性和伪类，就能轻松实现自己想要的效果。