有序列表的自定义列表样式？ [英] Custom list styles for ordered lists?

问题描述

可能是一个明显的初学者问题：我正在寻找一个简单的方法来样式标准HTML有序列表没有任何标签，如下面的层次结构：

  A。一个
一个两个
 1.三个
 a。四
 aa。五
（I.）六
（1.）七
（a。）八
（aa。）九
  pre> 
 
 
有没有一个CSS解决方案？根据我的研究五级到九级的自定义样式只能用CSS计数器来实现。
解决方案
这通过CSS使用 list-style-type 。对层次结构的每个级别应用自定义类。
  ul.a {list-style-type：circle;} 
 ul.b {list-style-type：square;} 
 
 ol.c {list-style-type：upper-roman;} 
 ol.d {list-style- type：lower-alpha;} 
  
取自：http://www.w3schools.com/css/css_list.asp  
 
 
 
您可以指定自订文字例如：
 
 
 
 CSS：
  ul.custom 
 {
 list-style-type：none; 
 padding：0; 
} 
 
 ul.custom li.aa：before {content：aa。; } 
 ul.custom li.bb：before {content：bb。; } 
 ul.custom li.cc：before {content：cc。; } 
  
 HTML：
 < ul class =custom> 
< li class =aa> foo< / li> 
< li class =bb> bar< / li> 
< li class =cc> baz< / li> 
< / ul> 
  
这将导致：
  aa。 foo 
 bb。 bar 
 cc。 baz 
  
我知道这不是最优雅的解决方案，知道做到这一点。
 
Probably an obvious beginner question: I'm looking for an easy way to style standard HTML ordered lists without any tags like the following hierarchy: 
A. One
    I. Two
        1. Three 
            a. Four
                aa. Five
                    (I.) Six
                        (1.) Seven 
                            (a.) Eight
                                (aa.) Nine
Is there a CSS solution for this? According to my "research" the custom stylings for levels Five to Nine can only be achieved with CSS counters?
解决方案
You can achieve this through CSS with use of list-style-type.   Apply a custom class to each level of the hierarchy.
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
Taken from: http://www.w3schools.com/css/css_list.asp

You can specify custom text by doing this for example:

CSS:
ul.custom
 {
  list-style-type: none;
  padding: 0;
}

ul.custom li.aa:before { content: "aa. "; }
ul.custom li.bb:before { content: "bb. "; }
ul.custom li.cc:before { content: "cc. "; }
HTML:
<ul class="custom">
    <li class="aa">foo</li>
    <li class="bb">bar</li>
    <li class="cc">baz</li>
</ul>
This will result in:
aa. foo
bb. bar
cc. baz
I understand that this isn't the most elegant of solutions, but it is the only way I know of to do it.

                        
这篇关于有序列表的自定义列表样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！