Beberapa perkara yang mungkin anda tidak tahu mengenai gaya kaunter tersuai

Juan baru -baru ini mendedahkan beberapa perkara yang sangat menarik mengenai senarai gaya (terutamanya penanda senarai) dalam entri buku tahunannya mengenai peraturan. Anda mungkin sudah belajar tentang pseudo-elemen

. Anda kemungkinan besar anda cuba menggunakan kaunter @counter-style. Sebagai alternatif, pendekatan anda mungkin untuk membersihkan ::marker (berhati-hati untuk melakukan ini!) Dan secara manual tatal tanda pada counter-reset pseudo-elemen item senarai. counter-increment list-style Tetapi adakah anda telah mencuba ::before? Ternyata ia melakukan banyak kerja berat dan membuka cara baru untuk menggunakan senarai dan tag senarai.

Tetapkan gaya penanda untuk hanya satu item senarai @counter-style

Ini dipanggil sistem "tetap" yang ditetapkan kepada projek tertentu.

memberikan aksara ke tag tertentu

@counter-style style-fourth-item {
  system: fixed 4;
  symbols: "?";
  suffix: " ";
}

li {
  list-style: style-fourth-item;
}

Jika anda menggunakan sistem "pengumpulan", anda boleh menentukan simbol mana yang dimiliki oleh item senarai.

Perhatikan bahawa apabila sistem mencapai hujung gelung, ia mengulangi dan memulakan urutan baru berdasarkan item pertama dalam corak. Sebagai contoh, dadu tipikal mempunyai enam sisi, dan kami mula melancarkan dua dices pada item senarai ketujuh, sejumlah tujuh.

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

li {
  list-style: dice;
}

tambahkan awalan dan akhiran ke tag senarai

Lama dahulu, Chris menunjukkan cara untuk memasukkan tanda baca pada akhir tanda senarai menggunakan pseudo-elemen item senarai:

lebih mudah digunakan ::before sekarang:

ol {
  list-style: none;
  counter-reset: my-awesome-counter;

  li {
    counter-increment: my-awesome-counter;

    &::before {
      content: counter(my-awesome-counter) ") ";
    }
  }
}

Tetapkan gaya pelbagai item senarai pelbagai @counter-styles

Katakan anda mempunyai senarai 10 item, tetapi anda hanya mahu gaya item 1-3. Kami boleh menetapkan julat untuk ini:

@counter-style parentheses {
  system: extends decimal;
  prefix: "(";
  suffix: ") ";
}

kita juga boleh mengembangkan contoh dadu kita sendiri sebelum:

@counter-style single-range {
  system: extends upper-roman;
  suffix: ".";
  range: 1 3;
}

li {
  list-style: single-range;
}

cara lain ialah menggunakan kata kunci

sebagai nilai pertama:

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style single-range {
  system: extends dice;
  suffix: ".";
  range: 1 3;
}

li {
  list-style: single-range;
}

Bercakap tentang infinite, anda boleh menetapkannya kepada nilai kedua, yang akan dikira secara tidak terhad berdasarkan bilangan item senarai yang anda miliki.

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style single-range {
  system: extends dice;
  suffix: ".";
  range: infinite 3;
}

li {
  list-style: single-range;
}

Mungkin anda mahu gaya dua julat sekaligus dan termasuk item 6-9. Saya tidak pasti mengapa anda mahu melakukan ini, tetapi saya percaya anda (atau hippo anda) mempunyai alasan yang baik.

infinite

tambah padding ke penanda senarai

Adakah anda pernah menemui penjajaran yang tidak sekata tanda senarai? Ini biasanya berlaku dari satu hingga dua digit. Anda boleh mengisi tanda dengan aksara tambahan untuk menyelaraskan kandungan.

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style multiple-ranges {
  system: extends dice;
  suffix: ".";
  range: 1 3, 6 9;
}

li {
  list-style: multiple-ranges;
}

Sekarang tanda -tanda akan sentiasa menyelaraskan ... dengan baik, sehingga 999 item.

Ringkasan

/* 为列表项标记添加前导零 */
@counter-style zero-padded-example {
  system: extends decimal;
  pad: 3 "0";
}

Saya fikir ini adalah beberapa cara yang sangat menarik untuk menggunakan tag senarai dalam CSS, yang lebih baik daripada apa yang saya secara tradisinya menangani masalah tersebut. Dan sebagai

menjadi ciri asas "baru tersedia" pada September 2023, ia disokong dengan baik dalam penyemak imbas.

@counter-style

Atas ialah kandungan terperinci Beberapa perkara yang mungkin anda tidak tahu mengenai gaya kaunter tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!