对诸如“1.1,1.2”的有序列表进行样式化而不是“1,2”。 [英] Style an Ordered List like "1.1, 1.2" instead of "1, 2"

问题描述

由于下面的一些答案/意见（我同意），我觉得这个问题太含糊，我的问题。当我把它放在一起时，我太急了，这导致了错误的答案，我接受了错误。由于当前的答案和意见，我觉得即使我编辑这个问题，未来的观众会被网页上的答案/评论混淆，除非每个人都更新他们。因为这个，我创造了另一个问题，完全澄清我的问题。同样，我对此问题造成的混淆表示歉意。

Due to some of the answers/comments left below (with which I agree), I feel this question is too vague, and does not explain sufficiently my problem. I was too hurried when I put it together, and this has caused the incorrect answers, for which I accept the fault. Due to the current answers and comments, I feel that even if I edited this question again, that future viewers would be confused by the answers/comments on the page, unless everyone were to update them as well. Because of this, i have created another question that completely clarifies my problem. Again, I apologize for the confusion I caused on this question.

澄清的问题可以在这里找到：基于列表开始属性样式一个有序列表，例如XX。

The clarified question can be found here: Style an Ordered List like "X.X" based on list start attribute

我正在更新包含政策页面的客户网站。在政策内有九个不同的部分，每个部分都有自己的内容。在每个部分内是不同的部分语句，其应该具有x.x的编号系统。但是，这在基本HTML中不存在。此外，一些段在其自身内部具有各种不同形式的有序列表。

I am working on updating a client website that contains a policy page. Within the policy are nine different sections, each with their own content. Inside each section are different section statements, which should have the numbering system of "x.x". However, this does not exist in basic HTML. In addition, some sections have various different forms of ordered lists inside themselves.

我确定我不想以嵌套方式处理这个问题，也就是说：

I have determined that I do not want to tackle this problem in a nested way, that is to say like this:

<ol>
    <li>Section 1
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
        </ol>
    </li>
</ol>

这是我看过的每一个其他答案的方式对待问题。相反，我想这样处理（代码下面的示例）。我想要一个简单显示x.1，x.2，x.3的列表，其中x取决于特定列表的开始号。

This is the way that every other answer I have looked at treats the problem. Rather, I wish to tackle it like this (code for below sample). I want a list that simply displays "x.1, x.2, x.3," where 'x' is dependent on the start number of that particular list.

<h2>Section 1</h2>
<strong>Heading 1</strong>
<ol class="specialList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
<strong>Heading 2</strong
<ol type="lower-roman">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

<h2>Section 2</h2>
<ol class="specialList">
    <li>
        <ol type="upper-alpha">
            <li>First subitem</li>
            <li>Second subitem</li>
        </ol>
    </li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>

<h2>Section 3</h2>
<ol class="specialList">
    <li>First item
        <ol type="circle">
            <li>First subitem</li>
            <li>Second subitem</li>
        </ol>
    </li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

<h2>Section 4</h2>
<ol class="specialList">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

第1节

  标题

   1.1和ensp;第一项

   1.2和ensp;第二项

&emsp ; 1.3 第三项


   标题2

   i。  第一项

   ii。 第二项

   iii。第三项

Section 1

  Heading
  1.1 First item
  1.2 Second item
  1.3 Third item

  Heading 2
  i.  First item
  ii. Second item
  iii. Third item

   2.1 第一项

     A. 第一个子项目

     B. 第二个子项目

   2.2  Second item

   2.3 第三项

  2.1 First item
    A. First subitem
    B. Second subitem
  2.2 Second item
  2.3 Third item

;  3.1 第一个项目

    • 第一个子项目

   

   3.2 第二项

   3.3 第三项

  3.1 First item
    • First subitem
    • Second subitem
  3.2 Second item
  3.3 Third item

   4.1 第一项

   4.2 第二项

  4.3 第三项

  4.1 First item
  4.2 Second item
  4.3 Third item

这样，我可以避免使用嵌套排序列表，必要的CSS。这将意味着在每个有序列表中硬编码一些起始值属性，但是策略部分不会频繁更改，因此这不重要。

This way, I can avoid using a nested ordered list, and hopefully simplify the matter, especially the necessary CSS. It will mean hardcoding some start value attributes in to each ordered list, but the policy sections will not change frequently, so this should not matter.

我不想使用JavaScript，因为客户端希望它看起来这样，无论用户的设置。页面是JSP页面，所以如果有一个方法设置它动态生成，这是可以接受的。

I do not wish to use JavaScript, as the client wants it to look this way regardless of the user's setup. The pages are JSP pages, so if there is a way to set it up to dynamically generate, that would be acceptable.

我已经看过下面的链接。虽然他们是优秀的问题，他们没有回答我的具体问题。第一个处理嵌套排序列表，而我处理单个有序列表。第二个有正确的想法，但仍然有点不同（有xxx，而我只想要xx）。

I have already looked at these links below. While they are excellent questions, none of them answer my specific question. The first deals with nested ordered lists, while I am dealing with a single ordered list. The second one has the right idea, but is still a bit different (has "x.x.x", while I only want "x.x").

可以订购列出产生的结果看起来像1.1？

在有序列表上实现子编号

请让我知道如果我需要澄清什么！谢谢！

Please let me know if I need to clarify anything! Thanks!

将从x.1开始并根据需要进行移动的列表，其中x是特定列表的给定开始值属性。我只是与他们澄清这个问题，这是这个更新要求的原因。基本上，我需要一个类，将列表顶级的编号系统更改为xx格式（再次，其中第一个x是起始值）。任何子列表（嵌套列表）不会跟随格式，但会遵循type或list-style属性指定的另一种格式。

In conclusion, the client wants a list that will start at "x.1" and go as far as necessary, where "x" is a given start value attribute for the specific list. I just clarified this matter with them, which is the reason for this "update" of requirements. Basically, I need a class that changes the numbering system of the top level of a list to the "x.x" format (again, where the first "x" is the starting value"). Any sublists (nested lists) will not follow this format, but will follow another format as specified by the "type" or "list-style" attribute.

推荐答案

这里是我的 fiddle

 h2.title {
   font-size: 20px;
   font-weight: 800;
   margin-left: -20px;
   padding: 12px;
   counter-increment: ordem;
 }
 li.heading {
   font-size: 16px;
   font-weight: bold;
   padding: 12px;
   list-style-type: none;
 }
 .bullet {
   counter-reset: bullet;
   padding-left: 12px;
 }
 .bullet li {
   list-style-type: none;
 }
 .bullet li:before {
   counter-increment: bullet;
   content: counter(ordem)"." counter(bullet)" ";
 }
 ol.none {
   list-style: none!important
 }
 li.s2sub::before {
   counter-increment: none!important;
   content: none!important;
 }
 li.s2sub {
   list-style: upper-alpha;
 }
 li.s3sub::before {
   counter-increment: none!important;
   content: none!important;
 }
 li.s3sub {
   list-style-type: circle;
 }
 li.roman::before {
   counter-increment: none!important;
   content: none!important;
 }
 li.roman {
   list-style: lower-roman inside;
 }

<body>
  <ol>
    <h2 class="title">Section 1</h2> 
    <li class="heading">Heading 1</li>

    <ol class="bullet">
      <li>text 1 one</li>
      <li>text 1 two</li>
      <li>text 1 three</li>
      <li>text 1 four</li>
    </ol>
    <li class="heading">Heading 2</li>

    <ol class="bullet">
      <li class="roman">Item 1</li>
      <li class="roman">Item 2</li>
      <li class="roman">Item 3</li>
    </ol>
    <h2 class="title">Section 2</h2>
    <ol class="bullet">
      <li>First item
        <ol>
          <li class="s2sub">First subitem</li>
          <li class="s2sub">Second subitem</li>
        </ol>
      </li>
      <li>Second Item</li>
      <li>Third Item</li>
    </ol>
    <h2 class="title">Section 3</h2>
    <ol class="bullet">
      <li>First item
        <ol>
          <li class="s3sub">First subitem</li>
          <li class="s3sub">Second subitem</li>
        </ol>
      </li>
      <li>Second item</li>
      <li>Third item</li>
    </ol>
  </ol>
</body>

这篇关于对诸如“1.1,1.2”的有序列表进行样式化而不是“1,2”。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！