我可以通过类名来控制HTML元素的顺序吗？

Question

我有几个有固定类名的div：

<div class="type-a"></div>
<div class="type-b"></div>
<div class="type-c"></div>

其中可能有倍数，而这些div并不总是有序的。它们是动态添加的。

<div class="type-a"></div>
<div class="type-b"></div>
<div class="type-c"></div>
<div class="type-c"></div>
<div class="type-b"></div>
<div class="type-b"></div>
<div class="type-c"></div>
<div class="type-a"></div>

我想对所有的type-a和type-b div进行分组，并在type-c div前面显示它们(这可以通过向右浮动type-a & type-b和向左浮动type-c来完成)。另外，在type-a和type-b之间，我想首先显示type-a div。和type-b第二。

在不重新排列上述HTML或使用JavaScript的情况下，我试图获得以下输出：

[type-a] [type-a] [type-b] [type-b] [type-b] [type-c] [type-c] [type-c]

这有可能只使用CSS吗？

这是小提琴，div左右浮动。现在需要进行的排序是在type-a和type-b之间。

Answer 1

您可以使用flexbox和order属性：

​

.container>div {
  width: 20px;
  height: 20px;
  background-color: yellow;
}

.container {
  display: inline-flex;
}

.type-a {
  order: 1;
}

.type-b {
  order: 2;
}

.type-c {
  order: 3;
}

<div class="container">
  <div class="type-a">A</div>
  <div class="type-b">B</div>
  <div class="type-c">C</div>
  <div class="type-c">C</div>
  <div class="type-b">B</div>
  <div class="type-b">B</div>
  <div class="type-c">C</div>
  <div class="type-a">A</div>
</div>

​

Order也适用于Grid

​

.container>div {
  background-color: yellow;
}

.type-a {
  order: 1;
}

.type-b {
  order: 2;
}

.type-c {
  order: 3;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 20px);
  
}

<div class="container">
  <div class="type-a">A</div>
  <div class="type-b">B</div>
  <div class="type-c">C</div>
  <div class="type-c">C</div>
  <div class="type-b">B</div>
  <div class="type-b">B</div>
  <div class="type-c">C</div>
  <div class="type-a">A</div>
</div>

​

Answer 2

使用flex显示器：

​

.container {
display:flex;
flex-flow:column;
}

.type-a {
order:1;
}

.type-b {
order:2;
}

.type-c {
order:3;
}

<div class="container">
<div class="type-a">a</div>
<div class="type-b">b</div>
<div class="type-c">c</div>
<div class="type-c">c</div>
<div class="type-b">b</div>
<div class="type-b">b</div>
<div class="type-c">c</div>
<div class="type-a">a</div>
</div>

​