Html รายการสั่ง 1.1, 1.2 (ตัวนับและขอบเขตที่ซ้อนกัน) ไม่ทำงาน

Question 1

ฉันใช้ตัวนับและขอบเขตที่ซ้อนกันเพื่อสร้างรายการสั่งซื้อ:

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>

ขยายข้อมูลโค้ด

ฉันคาดหวังผลลัพธ์ต่อไปนี้:

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

แต่นี่คือสิ่งที่ฉันเห็น(เลขผิด) :

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

ฉันไม่รู้มีใครเห็นไหมว่ามันผิดพลาดตรงไหน?

นี่คือ JSFiddle: http://jsfiddle.net/qGCUk/2/

Question 2

ยกเลิกการทำเครื่องหมายที่ "normalize CSS" - http://jsfiddle.net/qGCUk/3/ การรีเซ็ต CSS ที่ใช้ในค่าเริ่มต้นจะเป็นค่าเริ่มต้นของระยะขอบรายการและการพายเรือเป็น 0

อัปเดต http://jsfiddle.net/qGCUk/4/ - คุณต้องรวมรายการย่อยของคุณไว้ในรายการหลักของคุณ<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>

ขยายข้อมูลโค้ด

Question 3

ใช้ลักษณะนี้เพื่อเปลี่ยนเฉพาะรายการที่ซ้อนกัน:

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

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

Question 4

ลองดู :

http://jsfiddle.net/PTbGc/

ปัญหาของคุณได้รับการแก้ไขแล้ว

สิ่งที่ปรากฏให้ฉันเห็น (ใน Chrome และ 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

ฉันทำมันอย่างไร

แทน :

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

ทำ:

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

Question 5

นี่เป็นทางออกที่ยอดเยี่ยม! ด้วยกฎ CSS เพิ่มเติมสองสามข้อคุณสามารถจัดรูปแบบได้เช่นเดียวกับรายการเค้าร่าง MS Word ที่มีการเยื้องบรรทัดแรกแบบแขวน:

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

Question 6

ฉันพบปัญหาที่คล้ายกันเมื่อเร็ว ๆ นี้ การแก้ไขคือการตั้งค่าคุณสมบัติการแสดงผลของรายการ li ในรายการที่เรียงลำดับเป็นรายการรายการและไม่แสดงบล็อกและตรวจสอบให้แน่ใจว่าคุณสมบัติการแสดงผลของ ol ไม่ใช่รายการรายการ กล่าวคือ

li { display: list-item;}

ด้วยสิ่งนี้ตัวแยกวิเคราะห์ html จะเห็น li ทั้งหมดเป็นรายการและกำหนดค่าที่เหมาะสมให้กับมันและมองว่า ol เป็นองค์ประกอบอินไลน์บล็อกหรือบล็อกตามการตั้งค่าของคุณและไม่พยายามกำหนดค่าการนับใด ๆ ให้ มัน.

Question 7

วิธีแก้ปัญหาของ Moshe นั้นยอดเยี่ยม แต่ปัญหาอาจยังคงมีอยู่หากคุณต้องการใส่รายการไว้ในไฟล์div. (อ่าน: CSS counter-reset ในรายการที่ซ้อนกัน )

ลักษณะนี้สามารถป้องกันปัญหานั้นได้:

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>

ขยายข้อมูลโค้ด

คุณยังสามารถตั้งค่าการนับถอยหลังli:beforeได้อีกด้วย

Question 8

หลังจากผ่านคำตอบอื่น ๆ ที่ฉันได้มาแล้วให้ใช้คลาสnested-counter-listกับolแท็กรูท:

รหัส 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;
      }
    }
  }
}

รหัส 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>

ขยายข้อมูลโค้ด

และหากคุณต้องการต่อท้าย.ตัวนับของรายการที่ซ้อนกันให้ใช้สิ่งนี้:

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>

ขยายข้อมูลโค้ด

Question 9

ง่าย ๆ เข้าไว้!

ง่ายกว่าและเป็นวิธีแก้ปัญหามาตรฐานในการเพิ่มจำนวนและเพื่อรักษาจุดที่จุดสิ้นสุด แม้ว่าคุณจะได้รับ css ที่ถูกต้อง แต่ก็จะไม่ทำงานหาก HTML ของคุณไม่ถูกต้อง ดูด้านล่าง

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

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>