使用 CSS 计数器,实现章节自动编号

body {
  counter-reset: h1;
}

h1 {
  counter-reset: h2;
}

h2 {
  counter-reset: h3;
}

h3 {
  counter-reset: h4;
}

h4 {
  counter-reset: h5;
}

h5 {
  counter-reset: h6;
}

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

h2:before {
  counter-increment: h2;
  content: counter(h1) "." counter(h2) ". ";
}

h3:before {
  counter-increment: h3;
  content: counter(h1) "." counter(h2) "." counter(h3) ". ";
}

h4:before {
  counter-increment: h4;
  content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". ";
}

h5:before {
  counter-increment: h5;
  content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
}

h6:before {
  counter-increment: h6;
  content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
}

 

posted @ 2025-04-11 12:58  Nihaorz  阅读(9)  评论(0)    收藏  举报