Untuk memaparkan laluan bahagian lengkap seperti 1.2.1, sarangkan senarai tertib dan gunakan CSS counters() untuk menggabungkan arasnya. Tutorial ini mencipta fail HTML setempat pada Mac, mengekalkan susunan rangka dan menunjukkan cara menyemak penomboran selepas pengeditan.

Bagaimanakah penomboran laluan penuh berfungsi?

Laluan bahagian lengkap merekodkan kedudukan sesuatu item pada setiap aras. Contohnya, 1.2.1 bermaksud item pertama dalam anak kedua bagi item aras teratas yang pertama. CSS menyediakan counters() khusus untuk menggabungkan nilai pembilang bersarang, dibaca dari pembilang paling luar hingga paling dalam dengan pemisah pilihan anda di antaranya. MDN: fungsi CSS counters()

Untuk tugasan ini, rangka tersebut ialah senarai tertib dengan cabang bersarang. Ia bukan jadual kandungan yang dijana secara automatik daripada tajuk di bahagian lain dokumen. HTML mentakrifkan item senarai tertib mengikut susunan pepohon, jadi pastikan susunan sumber sepadan dengan susunan bacaan yang dimaksudkan. Piawaian HTML: Elemen ol

Contoh ini menggunakan tiga peraturan: wujudkan pembilang pada setiap senarai yang terlibat, tingkatkannya bagi setiap item, dan paparkan laluan gabungan sebelum label item. Corak ini mengikut contoh pembilang bersarang yang didokumenkan MDN, dengan pemilih yang dihadkan kepada rangka ini. MDN: Menggunakan pembilang CSS

Cipta fail rangka pada Mac anda

Anda memerlukan TextEdit dan pelayar seperti Safari. Contoh lengkap ini mengandungi helaian gaya sendiri dan kandungan sampel rekaan; ia tidak memerlukan pakej, alat binaan atau JavaScript.

  1. Buka TextEdit dan pilih File > New.
  2. Pilih Format > Make Plain Text.
  3. Tampal contoh lengkap di bawah.
  4. Pilih File > Save, namakan fail outline.html dan simpan di lokasi yang mudah, seperti Desktop anda.
  5. Jika TextEdit bertanya sambungan fail yang hendak digunakan, pilih Use .html.

Apple mendokumenkan aliran kerja teks biasa ini untuk mencipta fail HTML dalam TextEdit. Apple: Bekerja dengan dokumen HTML dalam TextEdit pada Mac

Berikut ialah dokumen lengkap. Salin kandungan blok kod tanpa baris pagar Markdown.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nested outline example</title>
  <style>
    body {
      max-width: 48rem;
      margin: 2rem auto;
      padding: 0 1rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .outline,
    .outline ol {
      counter-reset: outline-section;
      list-style-type: none;
      padding-inline-start: 1.5rem;
    }

    .outline li {
      counter-increment: outline-section;
      margin-block: 0.35rem;
    }

    .outline li::before {
      content: counters(outline-section, ".") " ";
      font-weight: 600;
    }
  </style>
</head>
<body>
  <h1>Sample document outline</h1>
  <ol class="outline" role="list">
    <li>Node A
      <ol role="list">
        <li>Node B</li>
        <li>Node C
          <ol role="list">
            <li>Node D</li>
            <li>Node E</li>
          </ol>
        </li>
        <li>Node F</li>
      </ol>
    </li>
    <li>Node G
      <ol role="list">
        <li>Node H</li>
      </ol>
    </li>
    <li>Node I</li>
  </ol>
</body>
</html>

Buka Safari, kemudian seret outline.html dari Finder ke dalam tetingkap Safari. Gunakan TextEdit untuk mengedit sumber dan Safari untuk memeriksa rangka yang dipaparkan. Selepas setiap pengeditan, simpan fail dan muat semula halaman pelayar.

Kekalkan TextEdit dalam mod pengeditan kod

Apabila membuka semula fail, anda mungkin melihat kandungan berformat dan bukannya kod sumber. Apple mendokumenkan dua pilihan: gunakan File > Open, klik Show Options dan pilih Ignore rich text commands; atau aktifkan Display HTML files as HTML code instead of formatted text di bawah TextEdit > Settings > Open and Save. Apple: Bekerja dengan dokumen HTML dalam TextEdit pada Mac

Semak laluan lengkap berdasarkan sampel

Rangka yang dijangka dipaparkan ditunjukkan di bawah. Labelnya ialah pemegang tempat neutral; kedudukannya menentukan nombor.

1 Node A
  1.1 Node B
  1.2 Node C
    1.2.1 Node D
    1.2.2 Node E
  1.3 Node F
2 Node G
  2.1 Node H
3 Node I

Sampel ini menyemak tiga peralihan yang berbeza. Node D memulakan aras ketiga di bawah Node C. Node F menyambung semula aras kedua selepas cabang itu tamat. Node G menyambung semula aras teratas dan anak pertamanya bermula pada 2.1. Penelusuran pepohon sampel yang deterministik mengesahkan laluan yang dijangka ini; contoh ini tidak dipaparkan dalam pelayar semasa penyediaan.

Mengapa setiap peraturan CSS penting

Tetapan semula perlu digunakan pada kedua-dua .outline dan .outline ol. Setiap senarai bersarang memerlukan tika baharu outline-section; menetapkan semula senarai luar sahaja tidak akan mewujudkan kiraan berasingan bagi setiap kedalaman. Peningkatan pada setiap item senarai akan memajukan tika semasa. MDN: Menggunakan pembilang CSS

Peraturan paparan menggunakan counters(outline-section, "."). Fungsi bentuk jamak mengumpulkan semua tika aktif dengan nama tersebut. Jika digantikan dengan counter(outline-section) bentuk tunggal, hanya nilai aras semasa akan dipaparkan, lalu item bersarang akan berlabel 1 dan bukannya laluan lengkapnya. MDN: fungsi CSS counters()

Contoh ini membuang penanda senarai natif kerana ia menyediakan awalan sendiri. Setiap senarai juga mempunyai role="list": MDN mendokumenkan bahawa Safari mungkin tidak memasukkan senarai yang digayakan dengan list-style-type: none ke dalam pepohon kebolehcapaiannya. Kekalkan atribut itu apabila menambah satu lagi senarai bersarang. MDN: Sifat CSS list-style-type

Edit rangka tanpa merosakkan strukturnya

Letakkan setiap <ol> bersarang di dalam <li> yang memiliki cabang tersebut. Contohnya, Node C mengandungi senarai anaknya sebelum tag penutup </li> Node C. Senarai bersarang tidak boleh menjadi anak langsung kepada senarai tertib yang lain. MDN: Elemen senarai tertib HTML

Untuk ujian pengeditan yang praktikal, tambahkan item baharu tepat sebelum Node C. Laluan baharunya sepatutnya 1.2; Node C sepatutnya menjadi 1.3; dan Node D serta Node E sepatutnya menjadi 1.3.1 dan 1.3.2. Node G sepatutnya kekal 2. Perubahan yang dijangka ini berpunca daripada hierarki sampel dan membantu menyemak bahawa penomboran mengikut struktur cabang.

Untuk mengalihkan cabang, alihkan keseluruhan item senarai pemiliknya, termasuk senarai bersarang dan tag penutupnya. Mengalihkan labelnya sahaja akan menyebabkan anak-anaknya tertinggal. Untuk mencipta aras keempat, ulang struktur senarai bersarang yang sedia ada di dalam item yang sesuai; jangan taip nombor tambahan pada label.

Kekalkan satu senarai anak bagi setiap cabang apabila anak-anaknya perlu membentuk satu jujukan yang berterusan. Dalam pelaksanaan ini, mencipta satu lagi senarai anak sejajar akan mewujudkan tetapan semula yang lain, maka penomboran setempatnya bermula semula. Contoh MDN menunjukkan pengiraan semula ini dengan senarai bersarang berasingan di bawah item yang sama. MDN: Menggunakan pembilang CSS

Diagnosis penomboran yang salah mengikut urutan yang berguna

Mulakan dengan struktur, kemudian peraturan pembilang, kemudian persembahan. Mengubah inden tidak dapat membaiki aras bersarang yang hilang.

Perkara yang anda lihat Perkara yang perlu diperiksa Pembetulan untuk contoh ini
Setiap item bersarang memaparkan satu nombor sahaja Fungsi dalam content Gunakan counters() bentuk jamak dengan pemisah noktah.
Setiap item sejajar bermula pada 1 Pemilih tetapan semula Tetapkan semula pada senarai, bukan pada setiap item.
Nombor natif muncul bersebelahan laluan lengkap Peraturan gaya senarai Gunakan list-style-type: none pada senarai luar dan senarai bersarang.
Satu cabang mempunyai awalan yang tidak dijangka Kedudukan senarai bersarangnya Kekalkan senarai anak di dalam item pemiliknya.
Senarai lain di tempat lain mendapat awalan Skop pemilih pembilang Kekalkan awalan .outline pada peraturan.

Semak juga sama ada sesuatu item telah disembunyikan. Operasi pembilang CSS tidak dijalankan pada elemen yang tidak menjana kotak, termasuk elemen dengan display: none. Sebaliknya, visibility: hidden masih menjana kotak dan oleh itu boleh mempengaruhi pengiraan. Tentukan dengan sengaja sama ada item yang digugurkan patut mengisi satu kedudukan. W3C: Pembilang dalam elemen yang tidak menjana kotak

Bagaimana pula dengan nombor permulaan tersuai?

Contoh ini sengaja menggunakan pembilang tersuai yang bermula daripada sifar dan meningkat kepada satu. Atribut HTML seperti start, reversed dan value bagi item senarai mengawal penomboran senarai tertib natif; peraturan tersuai outline-section yang ditunjukkan di sini tidak membaca atribut tersebut. Oleh itu, menambah start="4" sahaja tidak akan menjadikan awalan yang dipaparkan oleh contoh ini bermula pada 4. Piawaian HTML: Senarai tertib dan item senarai

Jika anda memerlukan penomboran tidak berjujukan atau cabang yang menurun, tetapkan keperluan itu sebelum mengubah suai helaian gaya ini. Pastikan laluan yang dipaparkan sepadan dengan nilai senarai tertib yang dimaksudkan, bukannya menambah atribut yang diabaikan oleh paparan tersuai.

Tentukan sama ada nombor itu persembahan atau kandungan dokumen

Awalan dalam tutorial ini ialah kandungan yang dijana oleh CSS. Ia sesuai untuk rangka visual, tetapi rujukan penting memerlukan pertimbangan tambahan: MDN menyatakan bahawa kandungan yang ditambah melalui ::before tidak dapat diakses secara konsisten oleh pembaca skrin. Menambah role="list" mengekalkan pengecaman senarai; ia tidak menjamin setiap laluan yang dijana akan diumumkan. MDN: Elemen pseudo CSS ::before

Jika laluan lengkap perlu menjadi sebahagian daripada teks sebenar—contohnya, dalam eksport teks biasa—masukkannya sebagai teks dalam dokumen atau jana semasa langkah eksport. Ini mengubah tanggungjawab penyelenggaraan: pengeditan juga perlu mengemas kini laluan yang disimpan itu. Jangan bergantung pada awalan visual untuk membekalkan teks penting dalam setiap format output.

Untuk rangka visual setempat, akhiri dengan menyemak sembilan laluan sampel, menyisipkan item sejajar dan mengesahkan bahawa cabang yang terjejas dinomborkan semula seperti yang dijangka. Selepas semakan itu berjaya dalam pelayar anda, gantikan label rekaan sambil mengekalkan struktur bersarang dan susunan sumber.

Sumber