css怎样去掉li元素默认样式

1. 去除li元素默认样式的原理

在CSS中，每个HTML元素都有默认的样式。默认样式不同于浏览器的预设样式表，在不同的浏览器中可能会有所差别。在HTML中，<ul>和<ol>元素中的<li>元素是列表元素，也有默认样式。

要去除<li>元素的默认样式，需要重写这个元素的样式规则。首先需要先了解<li>元素的默认样式规则。

根据MDN Web Docs所述，Web浏览器对于<li>元素所采用的默认样式包括：

/* 对于无序列表里的li元素 */
ul li {
    display: list-item;
    text-align: -webkit-match-parent;
}
/* 对于有序列表里的li元素 */
ol li {
    display: list-item;
    text-align: -webkit-match-parent;
}

因此，如果要去掉<li>元素的默认样式，可以直接对这些样式规则进行重写。

2. 去除无序列表中<li>元素的默认样式

在无序列表中，<li>元素默认会以实心圆点形式显示，可以通过CSS将其去除。

2.1 去除实心圆点

通过将list-style属性设置为none来去除实心圆点：

ul li {
  list-style: none;
}

2.2 设置自定义的样式

可以将其它的符号（例如方块、空心圆、实心正方形等）作为自定义的<li>元素样式，也可以使用图片作为符号，方法如下：

2.2.1 使用字体图标

可以使用Web字体库，例如Font Awesome，在CSS中设置<li>元素的内容为对应字体图标即可。例如使用Font Awesome中的fa-check图标：

ul li {
    list-style: none;
}
ul li:before {
    font-family: 'Font Awesome 5 Free'; /* Web字体 */
    content: '\f00c'; /* 图标代码 */
    margin-right: 0.5em;
}

2.2.2 使用CSS3内容生成

可以使用::before伪元素以及CSS3的内容生成来为<li>元素添加自定义样式。例如添加一个空心圆作为列表符号：

ul li {
    list-style: none;
}
ul li::before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    border: 5px solid #000;
    border-radius: 50%;
    transform: translateX(-20px);
}

这段CSS代码中，对::before伪元素使用了绝对定位，让它在<li>元素之前显示。通过设置边框宽度和颜色，以及边框的圆角半径，生成了一个空心圆作为符号。

3. 去除有序列表中<li>元素的默认样式

在有序列表中，<li>元素默认会以数字形式显示，可以通过CSS将其去除。

3.1 去除数字标记

通过将list-style属性设置为none来去除数字标记：

ol li {
    list-style: none;
}

3.2 设置自定义的样式

3.2.1 使用CSS3内容生成

可以使用CSS3的内容生成来为<li>元素添加自定义样式。例如将数字标记替换为实心圆：

ol li {
    counter-increment: step-counter;
}
ol li::before {
    content: counter(step-counter);
    margin-right: 0.5em;
}
ol {
    counter-reset: step-counter;
    list-style-type: none;
}
ol li::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #000000;
    margin-right: 0.5em;
    text-align: center;
    line-height: 1.5;
    color: #ffffff;
}

这段CSS代码中，对于有序的<ol>元素，首先设置了一个计数器step-counter，并将<li>元素的::before伪元素的内容设置为该计数器的值。同时，将计数器值设置为step-counter。然后，将<ol>元素的标记类型设置为none，即去除数字标记的样式。最后，对<li>元素的::before伪元素使用了一些CSS样式，用于生成一个实心圆作为符号。

3.2.2 使用图片作为标记

与无序列表中的方法类似，可以使用图片作为有序列表的标记。方法如下：

ol li {
    list-style: none;
    counter-increment: step-counter;
}
ol li:before {
    content: counter(step-counter);
    display: inline-block;
    background: url('path/to/image.png') no-repeat;
    width: 16px;
    height: 16px;
    text-indent: -9999px;
    margin-right: 10px;
}

这段CSS代码中，将<li>元素的list-style属性设置为none，去除数字标记的样式。然后，在伪元素::before中使用图片作为<li>元素的标记，使用width和height属性设置图片的大小，使用text-indent让<li>元素的内容向左移，隐藏数字标记。

总结

在HTML中，<li>元素是列表中的项目元素，有默认的样式。在无序列表中，默认以实心圆点显示，可以通过将list-style属性设置为none或者生成自定义的样式来去除实心圆点；在有序列表中，默认以数字形式显示，同样可以通过将list-style属性设置为none或者生成自定义的样式来去除数字标记。去除<li>元素的默认样式需要重写这个元素的样式规则，具体实现方法可以参考本文中的例子。这些方法不仅可以将默认样式去除，还可以将<li>元素的样式扩展和定制化，提高页面的可读性。