Bagaimana untuk Nomborkan Senarai Tertib Bersarang dalam HTML?

Menomborkan Senarai Tertib Bersarang dalam HTML

Untuk nombor senarai tersusun bersarang dalam HTML, gabungan CSS dan JavaScript boleh digunakan. Pendekatan ini berfungsi secara konsisten dalam penyemak imbas moden, termasuk yang tidak menyokong sifat CSS lanjutan.

Pendekatan CSS:

1. Tetapkan jenis gaya senarai bagi senarai tertib utama kepada tiada menggunakan CSS:

ol {
  list-style-type: none;
}

2. Gunakan set semula balas dan menambah sifat CSS balas untuk menjana nombor. Sebagai contoh, tahap pertama sarang harus menambah pembilang bernama "level1":

ol:before {
  content: counter(level1) ". ";
  counter-increment: level1;
}

3. Untuk senarai tersusun bersarang, tetapkan semula pembilang untuk memulakan urutan baharu:

ol li ol {
  list-style-type: none;
  counter-reset: level2;
}

4. Jana nombor untuk senarai bersarang menggunakan penambahan sebelumnya kaunter:

ol li ol li:before {
  content: counter(level1) "." counter(level2) " ";
  counter-increment: level2;
}

Pendekatan jQuery (Sokongan IE6/7):

1. Balut elemen senarai bersarang dengan untuk menggunakan penggayaan:

$('ol ol').each(function(i, ol) {
  ol = $(ol);
  ol.children('li').each(function(i, li) {
    li = $(li);
    li.prepend('<span>' + level2 + '</span>');
  });
});

2. Gaya elemen untuk menyediakan format penomboran yang diingini:

ol li span {
  margin: 0 5px 0 -25px;
}

Dengan menggabungkan teknik CSS dan JavaScript ini, anda boleh menomborkan senarai tersusun bersarang dengan berkesan dalam HTML, memastikan pemformatan yang konsisten merentas penyemak imbas utama.

Atas ialah kandungan terperinci Bagaimana untuk Nomborkan Senarai Tertib Bersarang dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!