HTML table 内的航向计数器

Question

我需要在 table 中设置文本格式，其中第二列包含文本，一些行包含标题 H1 - H5。我想为标题使用自动编号，但增量在 table.

中不起作用

问题是 H2 级别计数器没有增加，标题编号始终为 1.1。

你能帮忙吗，问题出在哪里？

body {
  counter-reset: h1counter;
}

h1 {
  counter-reset: h2counter;
}

h2 {
  counter-reset: h3counter;
}

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

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

h3:before {
  counter-increment: h3counter;
  content: counter(h1counter) "."counter(h2counter) "."counter(h3counter) ". ";
}

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <h1>Heading 1</h1>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <h2>Heading 1.1</h2>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        <h2>Heading 1.2</h2>
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>
        <h1>Heading 2.</h1>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

解决方案 #1。 这个任务可以使用 counter-set CSS 属性来解决。下面的示例：

body {
  counter-reset: h1counter h2counter h3counter;
}

body h1 {
  counter-set: h2counter 0;
}

body h2 {
  counter-set: h3counter 0;
}

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

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

h3:before {
  counter-reset: h3counter;

  counter-increment: h3counter;
  content: counter(h1counter) "."counter(h2counter) "."counter(h3counter) ". ";
}

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <h1>Heading 1</h1>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <h2>Heading 1.1</h2>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        <h2>Heading 1.2</h2>
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>
        <h1>Heading 2.</h1>
      </td>
    </tr>
    <tr>
      <td>5</td>
      <td>
        <h2>Heading 2.1</h2>
      </td>
    </tr>
    <tr>
      <td>6</td>
      <td>
        <h2>Heading 2.2</h2>
      </td>
    </tr>
  </tbody>
</table>

不幸的是，counter-set 是新的属性并且是 only supported by newer browsers and it doesn't work in Safari。

解决方案#2.另外，这个问题可以借助JS和数据属性来解决。下面的示例：

let h1Counter = 0,
  h2Counter = 0,
  h3Counter = 0;

document.querySelectorAll('h1, h2, h3').forEach((el) => {
  if (el.matches('h1')) {
    h1Counter++;
    h2Counter = 0;
    el.dataset.counter = `${h1Counter}`;
  } else if (el.matches('h2')) {
    h2Counter++;
    h3Counter = 0;
    el.dataset.counter = `${h1Counter}.${h2Counter}`;
  } else { // h3
    h3Counter++;
    el.dataset.counter = `${h1Counter}.${h2Counter}. ${h3Counter}`;
  }
})

h1:before,
h2:before,
h3:before {
  content: attr(data-counter) ". ";
}

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <h1>Heading 1</h1>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <h2>Heading 1.1</h2>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        <h2>Heading 1.2</h2>
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>
        <h1>Heading 2.</h1>
      </td>
    </tr>
    <tr>
      <td>5</td>
      <td>
        <h2>Heading 2.1</h2>
      </td>
    </tr>
    <tr>
      <td>6</td>
      <td>
        <h2>Heading 2.2</h2>
      </td>
    </tr>
  </tbody>
</table>

HTML table 内的航向计数器

HTML Heading counter within table

html

css

css-counter