需要使用 CSS 为标题创建订单列表编号和字母编号 [英] Need to create the order list numbers and alphabet numbers for the title using CSS

问题描述

我想使用 CSS 为标题创建订单号和订单字母.

h4.heading_numberlist{计数器增量:列表编号；边距顶部:12.0pt;边距右:0in;底边距:3.0pt；左边距:0in;分页后:避免；字体大小:12.0pt;font-family:"Arial",sans-serif;颜色:黑色;字体粗细:粗体；}h4.heading_numberlist::before{内容:计数器(列表编号，十进制)'.';}

<h4 class="heading_numberlist">服务</h4>
<div class="topicnested3"><h4 class="heading_numberlist">测试</h4>

<div class="topicnested3"><h4 class="heading_numberlist">编号</h4>

但它不起作用.预期输出为:

<代码>1.服务2. 测试3.数量

同时将字母标题更改为

A.服务B. 测试C. 号码

解决方案

你需要在 div 中递增而不是 h4

h4.heading_numberlist {边距顶部:12.0pt；边距右:0in;底边距:3.0pt；左边距:0in；分页后:避免；字体大小:12.0pt；字体系列:Arial"，无衬线；颜色:黑色;字体粗细:粗体；}h4.heading_numberlist::before {内容:计数器(列表编号，上字母)'.';/* 用小数更改数字的上半数*/}.话题 {计数器增量:列表编号；}

<h4 class="heading_numberlist">服务</h4>
<div class="topicnested3"><h4 class="heading_numberlist">测试</h4>

<div class="topicnested3"><h4 class="heading_numberlist">编号</h4>

<块引用>

计数器的范围从文档中具有该计数器的计数器重置"的第一个元素开始，并且包括该元素的后代及其后续同级及其后代.^ref

I want to create the order numbers and order alphabet letters for the title using CSS.

h4.heading_numberlist{
    counter-increment: list-number;
    margin-top:12.0pt;
    margin-right:0in;
    margin-bottom:3.0pt;
    margin-left:0in;
    page-break-after:avoid;
    font-size:12.0pt;
    font-family:"Arial",sans-serif;
    color:black;
    font-weight:bold;
    
}
h4.heading_numberlist::before{
   content: counter(list-number, decimal) '. ';
}

<div class="topic nested3">
<h4 class="heading_numberlist">Services</h4>
</div>
<div class="topic nested3">
<h4 class="heading_numberlist">Tests</h4>
</div>
<div class="topic nested3">
<h4 class="heading_numberlist">Number</h4>
</div>

But its not working. Expected Output is:

1. Services
2. Tests
3. Number

Meanwhile for the Alphabetic titles change into

A. Services
B. Tests
C. Number

解决方案

You need to increment in the div not the h4

h4.heading_numberlist {
  margin-top: 12.0pt;
  margin-right: 0in;
  margin-bottom: 3.0pt;
  margin-left: 0in;
  page-break-after: avoid;
  font-size: 12.0pt;
  font-family: "Arial", sans-serif;
  color: black;
  font-weight: bold;
}

h4.heading_numberlist::before {
  content: counter(list-number, upper-alpha) '. '; /* change upper-alpth with decimal for number*/
}

.topic {
  counter-increment: list-number;
}

<div class="topic nested3">
  <h4 class="heading_numberlist">Services</h4>
</div>
<div class="topic nested3">
  <h4 class="heading_numberlist">Tests</h4>
</div>
<div class="topic nested3">
  <h4 class="heading_numberlist">Number</h4>
</div>

The scope of a counter starts at the first element in the document that has a 'counter-reset' for that counter and includes the element's descendants and its following siblings with their descendants. ^ref

这篇关于需要使用 CSS 为标题创建订单列表编号和字母编号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！