样式化的有序列表，其嵌套列表应使用CSS计数器属性使用带字母的数字 [英] A styled ordered list whose nested list should have numbers with letters using CSS counter property

问题描述

我想在<ol>下的<li>元素中添加字母，例如我的问题:

I want to add a letter to an <li>-element from a my under <ol> like from my question:

body { counter-reset: item; }

ol.numbered_style li:before
{
    counter-increment:item;
    margin-bottom:5px;
    margin-right:10px;
    content:counter(item);
    background:blue;
    border-radius:100%;
    color:white;
    width:1.2em;
    text-align:center;
    display:inline-block;
}
ol.numbered_style.start_3{
  counter-reset: item 2; 
}

ol.none, ul.none,ol.numbered_style { list-style: none; }

<ol class="numbered_style">
	<li>first</li>
	<li>second</li>
	<li>third  Lorem Ipsum
		<ol class="numbered_style start_3">
			<li>missing an a after the number</li>
			<li>missing a b after the number</li>
			<li>missing a c after the number</li>
		</ol>
	</li>
</ol>

我已经尝试过li::before { content: " a ";}，但这没有用.我还想要一个解决方案，在其中添加第二个计数器可以生成具有以下字母数字模式的下一个元素，例如list-style-type: lower-alpha;

I have tried li::before { content: " a ";}, but this didn't work. I also want a solution, in which adding in a second counter can generate the next elements with the following alphanumeric pattern like list-style-type: lower-alpha;

推荐答案

当然，您可以执行<ol>可以执行的任何操作.

Sure, you can do anything that the <ol> can do.

ol.numbered_style.start_3{
  counter-reset: item2; 
}

ol.numbered_style.start_3 li:before {
    counter-increment:item2;
    content:counter(item2, upper-latin);
}/* List Style Type========^----------^*/

计数器列表样式类型

• 十进制------------------------------- 1，2，3，...

• decimal ------------------------------- 1, 2, 3, ...

十进制前导零-------------- 01，02，03，... 09，10，11，...

decimal-leading-zero -------------- 01, 02, 03, ... 09, 10, 11, ...

lower-alpha， 下拉丁----------- a，b，c，... z，aa，ab，...

lower-alpha, lower-latin ----------- a, b, c, ... z, aa, ab, ...

upper-alpha， 上拉丁---------- A，B，C，... Z，AA，AB，...

upper-alpha, upper-latin ---------- A, B, C, ... Z, AA, AB, ...

小写字母------------------------ i，ii，iii，iv，v，vi，...

lower-roman ------------------------ i, ii, iii, iv, v, vi, ...

上罗马字母------------------------ I，II，III，IV，V，VI，...

upper-roman ------------------------ I, II, III, IV, V, VI, ...

星号----------------------------- *, **, ***, ...

asterisks ----------------------------- *, **, ***,...

参考

http://www.princexml.com/doc/5.1/counters/

SNIPPET

body { counter-reset: item; }

ol.numbered_style li:before
{
    counter-increment:item;
    margin-bottom:5px;
    margin-right:10px;
    content:counter(item, upper-roman);
    background:blue;
    border-radius:100%;
    color:white;
    width:1.2em;
    text-align:center;
    display:inline-block;
}
ol.numbered_style.start_3{
  counter-reset: item2; 
}

ol.numbered_style.start_3 li:before {

    counter-increment:item2;
    margin-bottom:5px;
    margin-right:10px;
    content:"3"counter(item2, upper-latin);
    background:blue;
    border-radius:100%;
    color:white;
    width:1.2em;
    text-align:center;
    display:inline-block;
}
  
ol.none, ul.none,ol.numbered_style { list-style: none; }

<ol class="numbered_style">
	<li>first</li>
	<li>second</li>
	<li>third  Lorem Ipsum
		<ol class="numbered_style start_3">
			<li>missing an a after the number</li>
			<li>missing an b after the number</li>
			<li>missing an c after the number</li>
		</ol>
	</li>
</ol>

这篇关于样式化的有序列表，其嵌套列表应使用CSS计数器属性使用带字母的数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！