设置有序列表，例如＆＃34; 1.1,1.2＆＃34;而不是＆＃34; 1,2＆＃34;

时间：2015-08-06 15:32:35

标签： html css list html-lists

注意：

由于下面留下的一些答案/评论（我同意），我觉得这个问题太模糊，并没有充分解释我的问题。当我把它放在一起时，我太匆忙了，这导致了错误的答案，我接受了这个错误。由于目前的答案和评论，我觉得即使我再次编辑这个问题，未来的观众也会对页面上的答案/评论感到困惑，除非每个人都要更新它们。因此，我创建了另一个问题，完全澄清了我的问题。我再次为这个问题引起的混乱道歉。

澄清的问题可以在这里找到：Style an Ordered List like “X.X” based on list start attribute

我正在努力更新包含政策页面的客户网站。在政策内有九个不同的部分，每个部分都有自己的内容。每个部分内部都有不同的部分语句，它们的编号系统应为＆＃34; x.x＆＃34;。但是，这在基本HTML中不存在。此外，某些部分内部有各种不同形式的有序列表。

我已经确定我不想以嵌套的方式解决这个问题，也就是说这样：

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

这就是我所看到的每个其他答案对待问题的方式。相反，我希望像这样解决它（下面的示例代码）。我想要一个简单显示＆＃34; x.1，x.2，x.3，＆＃34;在哪里＆＃39; x＆＃39;取决于特定列表的起始编号。

<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第一项
1.2第二项
1.3第三项

标题2
一世。第一项
II。第二项
III。第三项

第2节

2.1第一项
A.第一个子项目
B.第二个子项目
2.2第二项
2.3第三项

第3节

3.1第一项
•第一个子项目
•第二个子项目 3.2第二项
3.3第三项

第4节

4.1第一项
4.2第二项
4.3第三项

这样，我可以避免使用嵌套的有序列表，并希望简化问题，尤其是必要的CSS。这意味着将一些起始值属性硬编码到每个有序列表中，但策略部分不会经常更改，因此这无关紧要。

我不想使用JavaScript，因为无论用户的设置如何，客户都希望它看起来像这样。这些页面是JSP页面，因此如果有一种方法可以将其设置为动态生成，那么这是可以接受的。

我已经查看了以下这些链接。虽然它们是很好的问题，但它们都没有回答我的具体问题。第一个处理嵌套的有序列表，而我正在处理单个有序列表。第二个有正确的想法，但仍然有点不同（有＆＃34; x.x.x＆＃34;，而我只想要＆＃34; x.x＆＃34;）。

Can Ordered List Produce Results that looks like 1.1?

Achieve sub numbering on ordered list

如果我需要澄清任何事情，请告诉我！谢谢！

摘要

总之，客户想要一个从＆＃34; x.1＆＃34;开始的列表。并尽可能地去，＆＃34; x＆＃34;是特定列表的给定起始值属性。我刚刚与他们澄清了这个问题，这就是这个＆＃34;更新＆＃34;要求。基本上，我需要一个类将列表顶层的编号系统更改为＆＃34; x.x＆＃34;格式（同样，第一个＆＃34; x＆＃34;是起始值＆＃34;）。任何子列表（嵌套列表）都不会遵循这种格式，但会遵循＆＃34; type＆＃34;中指定的另一种格式。或＆＃34; list-style＆＃34;属性。

2 个答案:

答案 0 :(得分：2)

花了一段时间来解决这个问题！

这是我的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)

我让它像这样工作：

＆＃13;
＆＃13; 
body{
    counter-reset: section children;  
}
li{
    list-style:none;
}
.parent::before {
  counter-increment: section;  
  content: counter(section) " - ";
}
.parent li:first-child{
    counter-reset:children;
}
.parent li::before{
    counter-increment: children;  
    content: counter(section) "." counter(children) " - ";
 }
＆＃13; 
<ol>
    <li class="parent">Section 1
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
        </ol>
    </li>
    <li class="parent">Section 2
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
        </ol>
    </li>

</ol>
＆＃13;
＆＃13;
＆＃13;

我删除了列表样式，因为它没有必要 这样做是为孩子和部分创建两个单独的计数器，然后在每个新部分重置子计数器。

JSFiddle Demo

相关问题
最新问题