创建一个有序列表，如“X.X”基于列表的开始属性 [英] Style an Ordered List like "X.X" based on list start attribute

问题描述

我想为客户设计一个这样的有序列表，但我不确定如何。客户希望有一个政策页面，有几个部分。每个部分都有几个语句，其编号如下所示：x.1，x.2（其中x取决于章节编号）。以下是这些部分的HTML：

 < div class =customListBox> 
< h2>第1部分< / h2> 
< ol> 
< li>第1项< / li> 
< li>第2项< / li> 
< li>第3项< / li> 
< / ol> 
 
< h2>第2部分< / h2> 
< ol> 
< li>第1项< / li> 
< li>第2项< / li> 
< / ol> 
< / div> 
  

这是应该显示的内容：

>
1.3 第3项


$ b

第2节

2.1 第1项

2.2 第2项

---

我看了其他几个问题，但几乎所有这些列表都涉及嵌套列表，我希望远离，因为这会引发其他网站样式的问题。我知道CSS计数器，但我不确定是否可以在没有嵌套列表的情况下使用它们。另外，页面是一个动态的JSP页面，所以如果在JSP中有这样的一个方法，那就足够了。

我的相关问题给出了整个范围项目......我认为它太不清楚了，所以我用准系统代码开始了这个项目。我觉得，即使我编辑了另一个，其他答案和评论（由我的第一个和不明确的问题引起）可能会导致未来的访问者混淆。
风格有序列表，如1.1,1.2,1.3

这个问题是相似的，但涉及嵌套列表，我需要避免由于现有样式。另外，我不想要x数字或x.x.x数字;我只想要x.x号码。

让我知道我是否应该澄清任何事情！

解决方案

您可以使用 CSS计数器和反增量声明。编辑：更新片段以使用类名并调整伪元素定位。

编辑2：已更新snippet仅针对第一级列表项。

/ *无论你的默认值是什么，都是* / ol {list-style-type：upper-alpha; position：relative;} / *目标仅为.customListBox的第一级子元素ol元素* /。customListBox> ol {counter-increment：lists;反复：物品; list-style-type：none;} / *仅针对.customListBox中第一个ol的第一级子li元素* /。customListBox> ol> li :: before {content：counters（lists，，decimal）。计数器（项目，，十进制）;反增量：物品;位置：绝对的; left：0;}

 < div class =customListBox > < h2>第1部分< / h2> <醇> <李>项目< /锂> < li>项目< ol> < li>子项目< / li> < li>子项目< / li> < li>子项目< / li> < /醇> < /锂> <李>项目< /锂> < /醇> < h2>第2部分< / h2> <醇> < li>真的真的真的真的真的真的真的真的真的真的真的真的真的真的真的真的真的真的真的真的真的真的真的真的很长项目< / li> <李>项目< /锂> <李>项目< /锂> <李>项目< /锂> <李>项目< /锂> <李>项目< /锂> <李>项目< /锂> <李>项目< /锂> <李>项目< /锂> <李>项目< /锂> <李>项目< /锂> <李>项目< /锂> <李>项目< /锂> < / div>  

I would like to style an ordered list like this for a client, but am not sure exactly how. The client wishes to have a policy page, with several sections. Each section has several statements, which are numbered like so: "x.1, x.2" (where "x" is dependent on the section number). Here is what the HTML looks like for the sections:

<div class="customListBox">
    <h2>Section 1</h2>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>

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

This is what is should wind up showing:

---

Section 1

1.1 Item 1
1.2 Item 2
1.3 Item 3

Section 2

2.1 Item 1
2.2 Item 2

---

I have looked at several other questions, but almost all of them involve nested lists, which I wish to stay away from, as this induces problems with other site styles. I am aware of the CSS counters, but am unsure if I can use them without nesting lists. Also, the page is a dynamic JSP page, so if there is a way to do this in JSP, that would be sufficient.

Related question of mine that gives entire scope of project...I think it is too unclear, so I started this one with barebones code. I felt that even if I edited the other one, the other answers and comments on the page (caused by my first and very unclear question) could cause confusion to future visitors. Style an Ordered List like "1.1, 1.2, 1.3"

This question is similar, but involves nested lists, which I need to avoid due to existing styles. Also, I do not want "x" numbers, or "x.x.x" numbers; I only want "x.x" numbers. Can ordered list produce result like "1, 1.2, 1.3"?

Let me know if I should clarify anything!

解决方案

You can use CSS Counters and the counter-increment declaration.

Edit: Updated snippet to use class name and adjusted the pseudo-element positioning.

Edit 2: Updated snippet to only target first level list items.

 /* Whatever your defaults are */
ol {
  list-style-type:upper-alpha;
  position:relative;
}

/* Targets only .customListBox's first level child ol elements */
.customListBox > ol { 
    counter-increment: lists;
    counter-reset: items;
    list-style-type: none;
}

 /* Targets only the first level child li elements of the first ol's in .customListBox*/
.customListBox > ol > li::before {
    content: counters(lists, "", decimal) "." counters(items, "", decimal) " ";
    counter-increment: items;
    position:absolute;
    left: 0;
}

<div class="customListBox">
  <h2>Section 1</h2>
  <ol>
    <li>Item</li>
    <li>Item
      <ol>
        <li>Sub Item</li>
        <li>Sub Item</li>
        <li>Sub Item</li>
      </ol>
    </li>
    <li>Item</li>
  </ol>

  <h2>Section 2</h2>
  <ol>
    <li>Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ol>
</div>

这篇关于创建一个有序列表，如“X.X”基于列表的开始属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！