一个样式化的有序列表，其嵌套列表应使用CSS计数器属性

Question

我想在<li>下面<ol>添加一封来自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;，但这没效果。我还想要一个解决方案，其中添加第二个计数器可以使用以下字母数字模式生成下一个元素，如 { "manifest_version": 2, "name": "Test Plugin", "description": "This extension is a test.", "version": "1.0", "content_scripts": [ { "matches": ["https://www.google.com/*"], "js": ["main.js"] } ], "permissions": [ "activeTab" ] }

Answer 1

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

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========^----------^*/

计数器列表样式类型

  

  

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

  

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

  

• 下-α，   低级拉丁语----------- a，b，c，... z，aa，ab，...

  

• 上-α，   upper-latin ---------- A，B，C，... Z，AA，AB，...

  

• lower-roman ------------------------ i，ii，iii，iv，v，vi，...

  

• upper-roman ------------------------ I，II，III，IV，V，VI，...

  

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

  

<强>参考

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

<强>段

＆＃13;

＆＃13;

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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：

ol.main {
  counter-reset: item;
}
ol.main li {
  counter-increment: item;
}
ol.numbered_style li:before {
  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 ol.numbered_style li {
  counter-increment: subitem;
}
ol.numbered_style ol.numbered_style li:before {
  content: counter(item) counter(subitem, lower-alpha);
}
ol.none,
ul.none,
ol.numbered_style {
  list-style: none;
}

<ol class="main numbered_style">
  <li>first</li>
  <li>second</li>
  <li>third Lorem Ipsum
    <ol class="numbered_style">
      <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>

<hr>

<ol class="main numbered_style">
  <li>first</li>
  <li>second</li>
  <li>third Lorem Ipsum
    <ol class="numbered_style">
      <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>