css - 在标题中使用特殊格式在 CSS 中缩进

Question

我想使用 CSS 实现以下目标:

到目前为止，我使用以下 CSS 代码将单个元素向右移动:

[title^='10.10'] {
 position: relative;
 left: 10px;
    }

但是我想问你们，如果你们知道任何更简单的技巧，也许是通过标题开头的字符样式(如果这在 CSS 中甚至可能的话)从同一层次批量移动内容。

除此之外的问题是，元素本身具有不同的 ID，这意味着我非常依赖 CSS 的肮脏解决方法。

HTML 代码的一部分 - 使用 Dev-Tools 查看:

或者有没有办法用 JS 和 JQuery 来做到这一点？

提前致谢

Answer 1

我会用列表，这里是一个很短的例子，我用的是嵌套列表，你可以改变 ul 元素上的 padding-left 来增加或减少缩进。

ul{
  list-style: none;
  padding-left: 20px;
}

<ul>
  <li>one line</li>
  <li>one line</li>
  <li>
    <ul>
      <li>one line</li>
      <li>one line</li>
      <li>one line</li>
      <li>
        <ul>
          <li>one line</li>
          <li>one line</li>
          <li>one line</li>
          <li>one line</li>
         </ul>
      </li>
    </ul>
  </li>
  <li>one line</li>
</ul>