::marker 伪元素不支持 :hover 等交互伪类，因其属于非交互式附属渲染内容；需通过 li:hover 设置 color 等可继承属性间接改变标记样式，或改用 li::before 实现可靠 hover 响应。
在 CSS 中，::marker 伪元素用于自定义列表项（<li>）前的标记（如圆点、数字、字母等），但它**不能直接响应 :hover 状态**——因为 ::marker 本身不支持交互伪类（如 :hover、:focus）。这是规范限制，并非写法错误。
为什么 ::marker:hover 不生效
::marker 是一个“附属渲染内容”，它不属于可交互的 DOM 元素，浏览器不将其视为独立的可悬停目标。即使你写了：
li:hover ::marker { color: red; }
大多数浏览器（Chrome、Firefox、Safari 当前版本）会**完全忽略该规则**，控制台也不会报错，但样式不会应用。
立即学习“前端免费学习笔记（深入）”；
正确实现 hover 时改变标记样式的方案
需通过作用于 <li> 的 :hover 状态，间接影响其 ::marker。关键是：确保 list-style-type 已启用，且 ::marker 的可继承属性（如 color、font-size）能被父级 li 的状态所驱动。
-
用
color控制标记颜色：::marker默认继承li的color，所以给li:hover设置颜色即可改变标记色 -
避免重置继承链：不要在
li或祖先上设置color: inherit或覆盖color值，否则可能中断传递 -
显式声明
list-style-type：某些 UA 样式或重置库可能禁用默认标记，务必确认li父元素（如ul或ol）有明确的list-style-type
可工作的最小代码示例
<ul class="hover-list"><br> <li>第一项</li><br> <li>第二项</li><br></ul>
CSS：
.hover-list { list-style-type: disc; }<br>.hover-list li { color: #333; }<br>.hover-list li:hover { color: #e74c3c; } /* ✅ 标记随文字变红 */<br>.hover-list li:hover::marker { content: "→ "; } /* ⚠️ 仅部分浏览器支持 hover 下修改 content，不推荐依赖 */✅ 上述写法在 Chrome 110+、Firefox 115+、Safari 17.4+ 中均有效：悬停时圆点变为红色。
进阶：自定义标记内容 + hover 响应
若需完全自定义标记（如图标、箭头），建议放弃 ::marker，改用 li::before 并添加 :hover：
li::before {<br> content: "•";<br> display: inline-block;<br> width: 1em;<br> margin-right: 0.5em;<br> color: #666;<br>}<br>li:hover::before { color: #27ae60; }这种方式兼容性更好，控制更灵活，且 hover 完全可靠。
