ul li 實現層級列表顯示

實現效果如下：

 

 

實現要求具體如下：

1.標題有序號 上圖標記1

2.標題下面的子集標題要有一定的縮進，且子集標題也有一定的序號，上圖標記 2

3.如果子集標題內容過長，換行的時，開始的位置不能超過對應序號的位置，如上圖標記3

dom:

<div class="rule-contents">
        <ol class="rule-contents-items">
          <li>
            <div>
              <span>第一個標題</span>
              <ol>
                <li>
                  第一個標題的第一條內容
                </li>
                <li>
                  第二個標題的第二個內容第二個標題的第二個內容第二個標題的第二個內容第二個標題的第二個內容第二個標題的第二個內容
                </li>
              </ol>
            </div>
          </li>
          <li>
            <span>第二個標題</span>
            <ol>
              <li>第二個標題的第一條內容</li>
              <li>
                第二個標題的第二條內容
              </li>
            </ol>
          </li>
          <li>
            <span>第三個標題</span>
            <ol>
              <li>第三個標題的第一個內容，第三個標題的第一個內容第三個標題的第一個內容第三個標題的第一個內容第三個標題的第一個內容第三個標題的第一個內容</li>
              <li>第三個標題的第二條內容</li>
              <li>第三個標題的第三條內容</li>
              <li>第三個標題的第四條內容，第三個標題的第一個內容第三個標題的第一個內容第三個標題的第一個內容第三個標題的第一個內容第三個標題的第一個內容第三個標題的第一個內容</li>
            </ol>
          </li>
        </ol>
  </div>

css:

 .rule-contents {
          >ol>li {
            margin-bottom: 10px;
            list-style: outside; // 序號在內容外
            list-style-type: decimal; // 排序標准為 數字
            font-weight: 600;
            span {
              font-size: 16px;
            }
            ol {
              padding-left: 20px;
              li {
                list-style-type: lower-latin; // 排序標准為 字母
                font-weight: 400;
              }
            }
            
          }
        .rule-contents-items {
          padding-left: 10px;
        }
      }

注意部分：ol 的padding值不能少

否則如圖：

子集對父級的縮進問題：用text-indent 無法達到效果，文字可以縮進，對應的序號無法實現縮進

如圖：text-indent: 20px;

列表顯示的序號類型多種多樣，參考 http://www.w3school.com.cn/css/pr_list-style-type.asp