前端 - @counter-style 无效？

Question

@counter-style 无效

这是我的定义

@counter-style li-style {  system: cyclic;  symbols: url(@/assets/roadmap/li-style.webp);  suffix: " ";}

这是使用

ul {  list-style-type: li-style;}<ul>  <li>Second Beta Test</li>  <li>Genesis PFP Launch</li></ul>

可是效果不尽人意

大佬帮我分析分析

Answer 1

@counter-style 是一个 CSS 特性，允许你定义自定义的计数器样式，这在处理复杂的列表样式时非常有用。然而，这个特性目前只在部分浏览器中受到支持，例如 Firefox 和 Chrome。

首先，我建议你检查一下你的浏览器是否支持 @counter-style。如果你在不支持的浏览器中测试这段代码，那么你将看不到任何效果。

其次，@counter-style 定义的样式并不会自动应用到所有的列表样式上，你需要明确地将其应用到需要的元素上。在你的代码中，你已经通过 list-style-type: li-style; 将 li-style 应用到了 ul 元素上，这部分看起来是没有问题的。

然后，你的 symbols 属性使用了 url(@/assets/roadmap/li-style.webp);。这个 URL 可能是不正确的，或者你的图片文件可能不存在。请确保你的图片路径正确，并且图片文件存在。

最后，@counter-style 定义的样式可能受到 CSS 其他规则的影响，比如 list-style-image、list-style-position 等。请检查你的 CSS 中是否有其他可能影响列表样式的规则。

如果你已经检查了以上所有可能的问题，但问题仍然存在，那么我建议你查看浏览器的控制台，看是否有任何错误或警告信息。

希望这些信息能帮助你解决问题。如果你还有其他问题，或者需要更具体的帮助，请随时告诉我。