Chrome浏览器如何覆盖User Agent Stylesheet，解决li::marker默认样式问题

user agent stylesheet是浏览器自带的默认样式表，由浏览器厂商预先定义，作用是保证未自定义CSS的网页也具备基础的可读样式：比如li元素默认的圆点/序号标记、标题的默认字号大小、段落的默认上下边距、a标签的默认蓝色下划线等，都来自这个样式表。
它的优先级低于开发者自行编写的页面样式，只要你没有写对应规则覆盖，就会自动应用到元素上。

针对li的默认::marker样式，你可以通过以下几种方式覆盖：

• 全局清除所有列表的默认标记：在CSS中添加如下规则

/* 清除marker内容 */
li::marker {
  content: none;
}
/* 配套清除列表默认缩进 */
ul, ol {
  padding-left: 0;
  list-style: none;
}

直接给ul/ol设置list-style: none也会间接禁用::marker的默认内容，是更常用的写法。

• 局部指定列表清除标记：给不需要默认样式的列表添加自定义类名，避免影响其他需要原生列表样式的模块，示例：

.custom-list {
  list-style: none;
  padding-left: 0;
}

• 全量重置浏览器默认样式：如果需要抹平所有浏览器的默认样式差异，可以在项目CSS开头引入通用重置规则，统一将所有元素的内外边距、边框、默认列表样式等属性重置为基础值，从根源上避免浏览器默认样式干扰。

如果发现自定义样式没有生效，可以打开Chrome开发者工具的「元素」面板，查看对应元素的样式优先级，确认是否是自己写的选择器优先级低于默认规则导致覆盖失败。

内容的提问来源于stack exchange，提问作者carrot_142