跳过 :first-child 选择器上的隐藏元素

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 伪 class 仍然不同于 jQuery。不过，您可以使用的解决方法是通过 adding/removing a class.

来处理隐藏

那就是重写的问题了

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;
}

跳过 :first-child 选择器上的隐藏元素

Skip hidden element on :first-child selector

html

javascript

css

css-selectors

sortablejs