Style an Ordered List like “1.1, 1.2” instead of “1, 2”

后端未结

关注

 2  1325

NOTE:

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 t

相关标签:

2条回答

悲哀的现实

2020-12-21 14:44

Took a while to figure this one out!

here is my 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>

0 讨论(0)

北恋

2020-12-21 15:01

I got it to work like so:

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

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

I removed the list style, since it isn't necessary.
What this does is create two separate counters for the children and the sections, then resets the children counter on every new section.

JSFiddle Demo

0 讨论(0)