有序列表 1, 1.1, a

Question

當前結果：

1. Item
  1.1 Subitem
  1.2 Subitem2
     1.2.1 something more
     1.2.2 another point

期望的結果：

1. Item
  1.1 Subitem
  1.2 Subitem2
     a. something more
     b. another point

如何修改我的代碼以獲得第三級作為字母而不是 3 個數字。 我將type="a"添加到 HTML 中正確的<ol>元素，但它被覆蓋了。

 ol { list-style-type: none; counter-reset: item; margin: 0; padding: 0; } ol>li { display: table; counter-increment: item; margin-bottom: 0.6em; } ol>li:before { content: counters(item, "."); display: table-cell; padding-right: 0.6em; } li ol>li { margin: 0; }

 <ol> <li> <b> Our rights if you breach this policy </b> <ol> <li> We will decide whether there has been a breach of this policy by you. </li> <li> If we decide that you are in breach of any part of this policy, we may: <ol type="a"> <li> issue a warning to you; </li> <li> immediately stop your right to use our Service; </li> <li> take legal action against you to recover any of our losses caused by your breach; or </li> <li> notify law enforcement authorities if we decide that you have broken any law; or </li> <li> take any other action that we think is appropriate. </li> </ol> </li> </ol> </li> </ol>

Answer 1

您可以使用list-style-type: lower-alpha; 並用:not()偽 class 取消你的計數器：

1. 在樣式表的末尾創建一個規則，以您的type="a"為目標並分配您想要的列表樣式類型（小字母）。
2. 您的計數器將覆蓋此聲明，因此一個簡單的解決方案是僅將它們應用於:not([type="a"]) （不是您的 alpha 列表之一）的<ol>元素。

希望這對你有用：

 ol { list-style-type: none; counter-reset: item; margin: 0; padding: 0; } ol:not([type="a"]) > li { display: table; counter-increment: item; margin-bottom: 0.6em; } ol:not([type="a"]) > li::before { content: counters(item, "."); display: table-cell; padding-right: 0.6em; } ol[type="a"] { list-style-type: lower-alpha; }

 <ol> <li> <b> Our rights if you breach this policy </b> <ol> <li> We will decide whether there has been a breach of this policy by you. </li> <li> If we decide that you are in breach of any part of this policy, we may: <ol type="a"> <li> issue a warning to you; </li> <li> immediately stop your right to use our Service; </li> <li> take legal action against you to recover any of our losses caused by your breach; or </li> <li> notify law enforcement authorities if we decide that you have broken any law; or </li> <li> take any other action that we think is appropriate. </li> </ol> </li> </ol> </li> </ol>