Danh sách có thứ tự Html 1.1, 1.2 (Bộ đếm và phạm vi lồng nhau) không hoạt động

Tôi sử dụng bộ đếm và phạm vi lồng nhau để tạo danh sách có thứ tự:

ol {
    counter-reset: item;
    padding-left: 10px;
}
li {
    display: block
}
li:before {
    content: counters(item, ".") " ";
    counter-increment: item
}

<ol>
    <li>one</li>
    <li>two</li>
    <ol>
        <li>two.one</li>
        <li>two.two</li>
        <li>two.three</li>
    </ol>
    <li>three</li>
    <ol>
        <li>three.one</li>
        <li>three.two</li>
        <ol>
            <li>three.two.one</li>
            <li>three.two.two</li>
        </ol>
    </ol>
    <li>four</li>
</ol>

Tôi mong đợi kết quả sau:

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
3. three
  3.1 three.one
  3.2 three.two
    3.2.1 three.two.one
    3.2.2 three.two.two
4. four

Thay vào đó, đây là những gì tôi thấy (đánh số sai) :

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
2.4 three <!-- this is where it goes wrong, when going back to the parent -->
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four

Tôi không có manh mối, có ai thấy nó sai ở đâu không?

Đây là JSFiddle: http://jsfiddle.net/qGCUk/2/

Bỏ chọn "bình thường hóa CSS" - http://jsfiddle.net/qGCUk/3/ Thiết lập lại CSS được sử dụng trong đó mặc định tất cả lề và đệm danh sách thành 0

CẬP NHẬT http://jsfiddle.net/qGCUk/4/ - bạn phải đưa các danh sách phụ vào chính<li>

ol {
  counter-reset: item
}
li {
  display: block
}
li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>

Sử dụng kiểu này để chỉ thay đổi các danh sách lồng nhau:

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}

Kiểm tra cái này:

http://jsfiddle.net/PTbGc/

Sự cố của bạn dường như đã được khắc phục.

Những gì hiển thị cho tôi (trong Chrome và Mac OS X)

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
3. three
  3.1 three.one
  3.2 three.two
    3.2.1 three.two.one
    3.2.2 three.two.two
4. four

Tôi đã làm nó như thế nào

Thay vì :

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

Làm:

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

Đây là một giải pháp tuyệt vời! Với một số quy tắc CSS bổ sung, bạn có thể định dạng nó giống như danh sách phác thảo MS Word với thụt lề dòng đầu tiên bị treo:

OL { 
  counter-reset: item; 
}
LI { 
  display: block; 
}
LI:before { 
  content: counters(item, ".") "."; 
  counter-increment: item; 
  padding-right:10px; 
  margin-left:-20px;
}

Tôi gặp phải vấn đề tương tự gần đây. Cách khắc phục là đặt thuộc tính hiển thị của các mục li trong danh sách được sắp xếp thành list-item, chứ không phải khối hiển thị và đảm bảo rằng thuộc tính display của ol không phải là list-item. I E

li { display: list-item;}

Với điều này, trình phân tích cú pháp html xem tất cả li là mục danh sách và gán giá trị thích hợp cho nó và xem ol, như một phần tử khối hoặc khối nội tuyến dựa trên cài đặt của bạn và không cố gắng gán bất kỳ giá trị đếm nào cho nó.

Giải pháp của Moshe rất tuyệt nhưng vấn đề vẫn có thể tồn tại nếu bạn cần đưa danh sách vào bên trong a div. (đọc: Đặt lại bộ đếm CSS trên danh sách lồng nhau )

Phong cách này có thể ngăn chặn vấn đề đó:

ol > li {
    counter-increment: item;
}

ol > li:first-child {
  counter-reset: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}

<ol>
  <li>list not nested in div</li>
</ol>

<hr>

<div>
  <ol>
  <li>nested in div</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
  </ol>
</div>

Bạn cũng có thể bật cài đặt lại bộ đếm li:before.

Sau khi xem qua các câu trả lời khác, tôi đã nghĩ ra điều này, chỉ cần áp dụng lớp nested-counter-listcho olthẻ gốc :

mã sass:

ol.nested-counter-list {
  counter-reset: item;

  li {
    display: block;

    &::before {
      content: counters(item, ".") ". ";
      counter-increment: item;
      font-weight: bold;
    }
  }

  ol {
    counter-reset: item;

    & > li {
      display: block;

      &::before {
        content: counters(item, ".") " ";
        counter-increment: item;
        font-weight: bold;
      }
    }
  }
}

mã css :

ol.nested-counter-list {
  counter-reset: item;
}
ol.nested-counter-list li {
  display: block;
}
ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}
ol.nested-counter-list ol {
  counter-reset: item;
}
ol.nested-counter-list ol > li {
  display: block;
}
ol.nested-counter-list ol > li::before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}

ol.nested-counter-list {
  counter-reset: item;
}

ol.nested-counter-list li {
  display: block;
}

ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}

ol.nested-counter-list ol {
  counter-reset: item;
}

ol.nested-counter-list ol>li {
  display: block;
}

ol.nested-counter-list ol>li::before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}

<ol class="nested-counter-list">
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>

Và nếu bạn cần dấu .ở cuối các bộ đếm của danh sách lồng nhau, hãy sử dụng điều này:

ol.nested-counter-list {
  counter-reset: item;
}

ol.nested-counter-list li {
  display: block;
}

ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}

ol.nested-counter-list ol {
  counter-reset: item;
}

<ol class="nested-counter-list">
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>

Giữ nó đơn giản!

Đơn giản hơn và một giải pháp Chuẩn để tăng số và giữ lại dấu chấm ở cuối. Ngay cả khi bạn hiểu đúng css, nó sẽ không hoạt động nếu HTML của bạn không đúng. xem bên dưới.

CSS

ol {
  counter-reset: item;
}
ol li {
  display: block;
}
ol li:before {
  content: counters(item, ". ") ". ";
  counter-increment: item;
}

SASS

ol {
    counter-reset: item;
    li {
        display: block;
        &:before {
            content: counters(item, ". ") ". ";
            counter-increment: item
        }
    }
}

HTML Parent Child

Nếu bạn thêm đứa trẻ, hãy chắc chắn rằng nó nằm dưới phần cha mẹ li.

<!-- WRONG -->
<ol>
    <li>Parent 1</li> <!-- Parent is Individual. Not hugging -->
        <ol> 
            <li>Child</li>
        </ol>
    <li>Parent 2</li>
</ol>

<!-- RIGHT -->
<ol>
    <li>Parent 1 
        <ol> 
            <li>Child</li>
        </ol>
    </li> <!-- Parent is Hugging the child -->
    <li>Parent 2</li>
</ol>