为什么使用伪类改变无序列表前面的小黑点颜色效果不是预期那样

本来想要上面的小黑点变蓝色
下面的变红色，为什么运行结果全部的点都是红色

css样式是在html文档加载完成后再渲染的，所以不是你样式写在html前面就只对后面的html生效。浏览器会把样式统一处理，根据样式的权重统一设置html的样式，题中的红色样式的权重大于蓝色，所以所有的li:marker都是红色。要想实现你预期的效果，可以上下的ul元素添加不同的class，根据class设置不同的样式。

该回答引用GPTᴼᴾᴱᴺᴬᴵ
在 CSS 中，使用 list-style 属性来设置无序列表的样式，而不是使用 ::before 伪元素来改变列表项前面的小黑点颜色。

要将无序列表项前面的小黑点颜色改为蓝色，可以使用以下代码：

ul {
  list-style: disc;
  color: blue;
}

这将会将列表项前面的小黑点样式设置为实心圆圈，颜色设置为蓝色。

要将无序列表的第二个列表项前面的小黑点颜色改为红色，可以使用以下代码：

ul li:nth-child(2) {
  list-style: disc;
  color: red;
}

这将会将第二个列表项前面的小黑点样式设置为实心圆圈，颜色设置为红色。

总的来说，您可以使用 list-style 属性来控制无序列表的样式，而不是使用 ::before 伪元素来改变列表项前面的小黑点颜色。