跳过隐藏元素：第一个子选择器

Question

我正在使用Sortable.js而我遇到以下问题：

我有一个我想要排序的项目列表，我需要第一个元素比其他3个元素更宽。

为了做到这一点，我有以下css：

#produto_img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#produto_img > li {
  height: 100px;
  margin: 0 5px;
}

#produto_img > li:not(:first-child) {
  flex: 1;
}

#produto_img > li:first-child {
  width: 100%;
  height: 200px;
  margin-bottom: 10px;
}

当我开始拖动第一个项目之后的任何项目时，它工作正常，即使我切换第一个项目它工作正常。

它会创建以下标记：

但是当我从第一个开始拖动时，我将失去样式，因为插件会在其位置创建另一个项目并将其设置为display: none，因此:first-child选择器将不再起作用，它失去了造型。

This gif显示正在发生的事情。

我的第一次尝试是以某种方式跳过第一个元素，如果它是display: none，或者使用类似:first-child:visible的东西，但显然这不起作用。

有解决方法吗？

Answer 1

可悲的是，:visible伪类仍然与jQuery不同。您可以使用的解决方法是通过添加/删除类来处理隐藏。

然后这是一个覆盖问题

li.hidden {
    display: none;
}

li:not(.hidden) {
    width: 100%;
    height: 200px;
    margin-bottom: 10px;
}

li:not(.hidden) ~ li {
    width: auto;
    height: auto;
    margin-bottom: 0;
    flex: 1;
}