有序列表的自定义列表样式？

本文介绍了有序列表的自定义列表样式？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

可能是一个明显的初学者问题：我正在寻找一个简单的方法来样式标准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;}

取自：www.w3schools/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: www.w3schools/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.