TinyMce嵌套的有序列表十进制编号，具有不同的编号样式 [英] TinyMce nested ordered list decimal numbering with different numbering styles

问题描述

背景

Tinymce编辑器支持嵌套的编号列表。使用编辑器自然可以实现类似这样的目的

现在的要求是显示这样的数字

到目前为止

这可以通过使用以下列表样式（来自

如何使嵌套列表也使用与父列表相同的格式？

解决方案

这是解决问题的方法，

  ol {
计数器重置：item 
} 
 
 ol li {
显示：块
} 
 
 ol li：before {
 content：counters（item，。）。; 
反增量：项目
} 
 
 ol [style * = list-style-type：lower-alpha;] li：be {{
 content： counters（item，。，低位字母）。; 
反增量：item 
}  

 < ol> 
< li>级别1< / li> 
< li>第1级
< ol> 
< li>级别2< / li> 
< li>级别2< / li> 
< li>第2级
< ol> 
< li>级别3< / li> 
< li>级别3< / li> 
< li>第3级
< ol> 
< li>级别4< / li> 
< li>级别4< / li> 
< li>级别4< / li> 
< / ol> 
< / li> 
< / ol> 
< / li> 
< / ol> 
< / li> 
< li>级别1< / li> 
< li>级别1< / li> 
< / ol>  

Background

The Tinymce editor supports nested numbered lists. Naturally something like this is possible with the editor,

Now the requirement is to show numbers like this,

So far

This is doable by modifying the stylesheet associated with the editor with following list styles (from this answer)

ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

Question

Now the issue is if I select some other number format (for example lower Greek from the editor it looks like following)

how do I get the nested lists also to use the same format as the parent list?

解决方案

This is the solution for the problem,

ol {
  counter-reset: item
}

ol li {
  display: block
}

ol li:before {
  content: counters(item, ".") ". ";
  counter-increment: item
}

ol[style*="list-style-type: lower-alpha;"] li:before {
  content: counters(item, ".", lower-alpha) ". ";
  counter-increment: item
}

<ol>
  <li>Level 1</li>
  <li>Level 1
    <ol>
      <li>Level 2</li>
      <li>Level 2</li>
      <li>Level 2
        <ol>
          <li>Level 3</li>
          <li>Level 3</li>
          <li>Level 3
            <ol>
              <li>Level 4</li>
              <li>Level 4</li>
              <li>Level 4</li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Level 1</li>
  <li>Level 1</li>
</ol>

这篇关于TinyMce嵌套的有序列表十进制编号，具有不同的编号样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！