如何为ol内的li元素创建:hover伪类选择器？[CSS]

首先纠正一个语法错误：你写的ol:li:hover是无效的CSS选择器，CSS里没有这种写法。要选中<ol>下的<li>元素的hover状态，正确的写法是：

ol li:hover {
  /* 这里写你需要的hover样式 */
}

至于为什么直接用li:hover会看起来像是选中了<ol>，大概率是这两种情况：

• 样式继承导致的：你的<li>的hover样式（比如背景色、字体颜色）被<ol>继承了，或者你给<ol>设置了和<li>重叠的样式规则，视觉上误以为是<ol>被选中。
• 选择器优先级冲突：如果之前有针对<ol>的高优先级样式，可能会干扰li:hover的表现，让你产生错觉。

给你一个完整的示例，确保样式只作用在<ol>下的<li>上：

<ol>
  <li>第一个列表项</li>
  <li>第二个列表项</li>
  <li>第三个列表项</li>
</ol>

/* 仅对ol下的li生效的hover样式 */
ol li:hover {
  background-color: #e8f4f8;
  color: #0066cc;
  cursor: pointer;
}

/* 给ol和li分别设置基础样式，避免继承混淆 */
ol {
  list-style: decimal;
  padding-left: 2rem;
  margin: 1rem 0;
}

li {
  padding: 0.3rem 0;
}

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