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>元素的样式扩展和定制化，提高页面的可读性。