html - 仅当兄弟不为空时显示按钮

Question

我想实现一个列表，可以通过按钮向其中添加新元素。列表顶部的一个按钮用于添加新元素，底部的另一个按钮用于添加新元素。

HTML:

<div>
    <div id="list">
      <button class="addbtn">prepend item</button>
      <ul id="items"></ul>
      <button class="addbtn">append item</button>
    </div>
</div>

按钮仅在悬停包含列表的 div 时可见(通过 css :hover 选择器)。

CSS:

.addbtn {
  display: none;
}

#list:hover .addbtn {
  display: block;
}

有没有办法(不使用 JS，仅使用 CSS)在列表为空时只显示追加按钮，而不显示前置按钮？如果列表至少包含一项，则应显示两个按钮。

JSFiddle:https://jsfiddle.net/uLmzom18/

编辑:这是带有工作解决方案的 JSFiddle:https://jsfiddle.net/khu7bahm/

Answer 1

您不能用 CSS 影响 DOM 流中另一个元素的向上。

但是你可以欺骗它:反转 HTML 中元素的顺序，并使用 flex 重新排列它们

ul:empty ~ .addbtn {
  background-color: lightgreen;
}

#list, #list2 {
  display: inline-flex;
  flex-direction: column-reverse;
}

<div>
    <div id="list">
      <button class="addbtn">prepend item</button>
      <ul id="items"></ul>
      <button class="addbtn">append item</button>
    </div>
</div>
<div>
    <div id="list2">
      <button class="addbtn">prepend item</button>
      <ul id="items">
      <li>1</li>
      <li>2</li>
      </ul>
      <button class="addbtn">append item</button>
    </div>
</div>