如何隐藏有序列表首项的上移按钮和末项的下移按钮

嗨，我来帮你排查下问题所在～你现在的CSS没生效主要有两个关键原因：

问题1：选择器的层级与目标元素匹配错误 #

你原来写的 ol#sectionList:first-child #up-btn 是在找作为父元素第一个子元素的<ol>标签里的id="up-btn"元素，但实际上你要隐藏的是ol#sectionList内部第一个<li>子元素里的上移按钮；而且你的HTML里按钮用的是class="up-btn"（类属性），不是id，所以不能用#up-btn（id选择器），得用.up-btn（类选择器）来匹配。

问题2：last-child的作用目标搞错了 #

同理，ol#sectionList:last-child #down-btn 是在找「作为父元素最后一个子元素的<ol>」，但你真正要控制的是ol#sectionList里面最后一个<li>里的下移按钮。

修正后的完整关键CSS #

把原来那两行无效的CSS替换成下面的代码即可：

/* 隐藏第一个列表项里的上移按钮 */
ol#sectionList li:first-child .up-btn {
  display: none;
}

/* 隐藏最后一个列表项里的下移按钮 */
ol#sectionList li:last-child .down-btn {
  display: none;
}

小补充：HTML标签闭合问题 #

顺便提一句，你的HTML里每个<li>内的<span>标签都没正确闭合（比如写了</span< /li>，应该改成</span></li>），虽然暂时不影响功能，但规范闭合标签能避免后续潜在的布局或渲染问题哦。

修改完成后，就能看到第一个列表项的上移按钮消失，最后一个列表项的下移按钮消失，完全符合你的需求～

内容来源于stack exchange