Html 先显示给定类的div

我想知道是否有一种纯粹的css解决方案，可以先显示带有给定类的div，然后再显示没有该类的div，这与它们在html代码中的显示顺序无关

例如，对于此html：

<div>6</div>
<div class="first">1</div>
<div class="first">3</div>
<div>2</div>
<div class="first">5</div>
<div>4</div>

6
1.
3.
2.
5.
4.

div应按以下顺序依次显示在另一个下方：

1,3,5,2,4,6

注:

---

我知道如何用javascript解决这个问题，我想知道是否存在纯css解决方案。

你可以用css改变外观和布局，但不能改变结构。这就是DOM操作和行为，出于理智，它属于脚本环境。为什么不使用单独的语义类而不是通用的“first”类呢？

您可以使用float

CSS

#container>div{display:inline block；}
#容器>div.first{float:left；}

HTML

6.
1.
3.
2.
5.
4.

看

如果您想将一个显示在另一个上面，这是我想出的唯一一个黑客解决方案：

#容器{宽度：100px；}
#container>div{display:inline块；float:right；position:relative；
宽度：50px；左侧：-50px；顶部：45px；字体大小：15px；行高：15px；}
#container>div.first{float:left；left:0；top:0；}

黑客是

top:45px它是（第一个元素的数量）*（行高）。我不确定在Chrome上测试的跨浏览器兼容性

请看
否决我的问题的亲爱的先生，你能解释一下你为什么这样做吗？为什么这个问题被否决了？使用*{float:right；}和。第一个{float:left}可能很难，但可以工作。
div{display:block；width:auto；float:right；}。第一个{float:left；}
如果您想在左侧显示，只需将其用div包装，并将新的div CSS赋予它
float:rightstyle@AndrewSpartan-不幸的是，这并不是那么简单：我不想操纵结构，我想操纵html标记的显示方式。下面的div堆叠就是为什么在这种情况下内联和优先级浮动不起作用的原因。这接近我想要的，但我需要在另一个上面显示div，正如我在问题中提到的。@TamasPap我猜你必须使用javascript来完成这个任务。@Brewal是的，看起来是这样。@TamasPap不要放弃-你觉得我的替代解决方案怎么样？它非常难看，只有当你知道.first元素的数量时才起作用，但它是我发现的唯一元素。@JanTuroň感谢你更新你的答案。然而，正如你所说，这是一个聪明的解决方案，在一般情况下，当元素数量未知时，它无法解决问题。你有我的支持和我的感激：）我把这个问题留待一段时间，也许我们会找到一个纯css解决方案的一般情况。