只选择 li 项目而不选择 ::marker，这可能吗？

【问题标题】：Select only the li item and not the ::marker, is it possible?只选择 li 项目而不选择 ::marker，这可能吗？
【发布时间】：2023-01-24 01:10:40
【问题描述】：

我想选择 li 的文本部分而不是 ::marker 部分。因此，当我将鼠标悬停在 li::marker 上时，翻译不起作用，但是当我将鼠标悬停在文本部分时，翻译工作正常。

所以我想要这样的东西，但它不起作用：


li:hover:not(li::marker) {
     transform: translate(20px);
}

【问题讨论】：

【解决方案1】：

无法在 CSS 中引用。您可以将 ul 设置为 list-style-type: none; 并使用 pseudo-element 创建自定义 ::marker 并以这种方式引用它。

但是，根据您正在尝试做的事情，我认为以下内容适用于 span。

span {
  display: inline-block;
}
li:hover span {
  transform: translate(20px);
}

<ul>
  <li><span>List item</span></li>
</ul>

【讨论】：