要将一个 HTML 元素变成有序列表（ordered list），可以使用 CSS 样式来设置列表项的样式和标记。以下是一个demo，展示如何将一个 <div> 元素变成有序列表：

HTML 结构：

<div class="custom-ol">
  <div>列表项 1</div>
  <div>列表项 2</div>
  <div>列表项 3</div>
</div>

CSS 样式：

.custom-ol {
  counter-reset: list-counter; /* 重置列表计数器 */
}

.custom-ol > div {
  counter-increment: list-counter; /* 递增列表计数器 */
  margin-bottom: 5px;
  position: relative;
  padding-left: 30px; /* 添加标记的左边距 */
}

.custom-ol > div::before {
  content: counter(list-counter); /* 使用计数器内容作为标记内容 */
  color: red; /* 设置标记颜色 */
  font-weight: bold; /* 设置标记字重 */
  position: absolute;
  left: 0; /* 将标记定位在左边距内 */
}

这个demo使用了一个 <div class="custom-ol"> 元素来代替 <ol> 元素，并使用样式进行自定义。

counter-reset: list-counter; 用于重置计数器。
counter-increment: list-counter; 用于递增计数器。
padding-left: 30px; 用于添加标记的左边距。

::before 伪元素用于创建标记。我们使用 content 属性设置标记内容，并使用 position: absolute; 将标记定位在列表项的左边。
这种方式可以自定义外观，但在语义上仍然是一个 <div> 元素，而不是 HTML 的语义有序列表。如果您需要正确的语义结构，最好还是使用 <ol> 元素，然后通过样式进行自定义