Question

我正在尝试在html表中创建多个级别的计数器，但这不符合我的预期。第一个计数器工作正常，但下一个计数器不起作用。不知何故，计数器没有递增或错误地重置？

代码：

<html>
  <head>
    <title>Counter Demo</title>
    <style>
      table.tasksteps {
          counter-reset: tasksteps;
      }

      td.taskstep {
          counter-reset: risks;
          counter-increment: tasksteps;
      }

      td.risk {
          counter-reset: measures;
          counter-increment: risks;
      }

      td.measure {
          counter-increment: measures;
      }

      td.taskstep:before {
          content: counter(tasksteps) '. ';
      }

      td.risk:before {
          content: counter(tasksteps) '.' counter(risks) '. ';
      }

      td.measure:before {
          content: counter(tasksteps) '.' counter(risks) '.' counter(measures) '. ';
      }

</style>
  </head>
  <body>
    <table class="tasksteps">
      <thead>
        <tr>
          <td>TaakStep</td>
          <td>Risk</td>
          <td>Measure</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="taskstep t1">Step 1</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td class="taskstep t2">Step 2</td>
          <td class="risk">Risk 1</td>
          <td></td>
        </tr>
        <tr>
          <td class="t3"></td>
          <td class="risk">Risk 2</td>
          <td></td>
        </tr>
        <tr>
          <td class="taskstep t2">Step 3</td>
          <td class="risk">Risk 3</td>
          <td></td>
        </tr>
        <tr>
          <td class="taskstep t2">Step 4</td>
          <td class="risk">Risk 4</td>
          <td></td>
        </tr>
        <tr>
          <td class="t4"></td>
          <td class="risk">Risk 5</td>
          <td class="measure">Measure 1</td>
        </tr>
        <tr>
          <td class="t5"></td>
          <td></td>
          <td class="measure">Measure 2</td>
        </tr>
        <tr>
          <td class="t5"></td>
          <td></td>
          <td class="measure">Measure 3</td>
        </tr>
        <tr>
          <td class="t5"></td>
          <td></td>
          <td class="measure">Measure 4</td>
        </tr>
        <tr>
          <td class="t3"></td>
          <td class="risk">Risk 6</td>
          <td></td>
        </tr>
        <tr>
          <td class="t4"></td>
          <td class="risk">Risk 7</td>
          <td class="measure">Measure 5</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

这给出了输出：
Output from above code

Fiddle

Answer 1

这里有两个问题：

第一个计算元素的直接父级应包含所有其他计数元素。在您的情况下，第一个计算的元素是一行td，因此其父级是tr ，但所有其他计数元素都有自己的父{{1} （这是第一个计数元素的父级的兄弟）。所以为了解决这个问题，我认为你必须在tr上设置课程并在那里计算。
可以覆盖tr和counter-reset，这意味着如果只有一个counter-increment，您需要使用tr和counter-reset来获取更多信息比1个计数器变量，你需要将它们放在counter-increment和counter-reset的相同声明（以空格分隔）上。

从上面2点开始，这里应该是代码：

<强> HTML ：

counter-increment

<强> CSS ：

<table class="tasksteps">
  <thead>
    <tr>
      <td>TaakStep</td>
      <td>Risk</td>
      <td>Measure</td>
    </tr>
  </thead>
  <tbody>        
    <tr class="taskstep">
      <td class="taskstep t1">Step 1</td>
      <td></td>
      <td></td>
    </tr>
    <tr class="taskstep risk">
      <td class="taskstep t2">Step 2</td>
      <td class="risk">Risk 1</td>
      <td></td>
    </tr>
    <tr class="risk">
      <td class="t3"></td>
      <td class="risk">Risk 2</td>
      <td></td>
    </tr>
    <tr class="taskstep risk">
      <td class="taskstep t2">Step 3</td>
      <td class="risk">Risk 3</td>
      <td></td>
    </tr>
    <tr class="taskstep risk">
      <td class="taskstep t2">Step 4</td>
      <td class="risk">Risk 4</td>
      <td></td>
    </tr>
    <tr class="risk">
      <td class="t4"></td>
      <td class="risk">Risk 5</td>
      <td class="measure">Measure 1</td>
    </tr>
    <tr>
      <td class="t5"></td>
      <td></td>
      <td class="measure">Measure 2</td>
    </tr>
    <tr>
      <td class="t5"></td>
      <td></td>
      <td class="measure">Measure 3</td>
    </tr>
    <tr>
      <td class="t5"></td>
      <td></td>
      <td class="measure">Measure 4</td>
    </tr>
    <tr class="risk">
      <td class="t3"></td>
      <td class="risk">Risk 6</td>
      <td></td>
    </tr>
    <tr class="risk">
      <td class="t4"></td>
      <td class="risk">Risk 7</td>
      <td class="measure">Measure 5</td>
    </tr>
  </tbody>
</table>

Updated Demo.

Answer 2

我玩了一下，似乎问题是重置身体同一行的所有计数器。

这是FIDDLE。

CSS

body {
  counter-reset: tasksteps risks measures;
}
table td {
  width: 120px;
  border: 1px solid black;
}
td.taskstep {
  counter-increment: tasksteps;
}
td.risk {
  counter-increment: risks;
}
td.measure {
  counter-increment: measures;
}
td.taskstep:before {
  content: counter(tasksteps) '. ';
}
td.risk:before {
  content: counter(tasksteps) '.' counter(risks) '. ';
}
td.measure:before {
          content: counter(tasksteps) '.' counter(risks) '.' counter(measures) '. ';
      }

Answer 3

CSS旨在利用HTML的层次性，从而实现“级联”样式表。表的元素结构是线性的，因此会破坏级联的效率。我知道在某些情况下，您可能无法控制文档的HTML结构，在这种情况下，CSS kluge可能是有序的。否则，我建议重构您的元素以匹配您尝试实现的布局的相同层次结构。更简单，更具伸缩性的代码。

<强> HTML：

 <ul>
  <li class='taskstep'>Step 1</li>
  <li class='taskstep'>Step 2
    <ul>
      <li class='risk'>Risk 1</li>
      <li class='risk'>Risk 2</li>
    </ul>
  </li>
  <li class='taskstep'>Step 3
    <ul>
      <li class='risk'>Risk 3</li>
    </ul>
  </li>
  <li class='taskstep'>Step 4
    <ul>  
      <li class='risk'>Risk 4</li>
      <li class='risk'>Risk 5</li>
        <ul>  
          <li class='measure'>Measure 1</li>
          <li class='measure'>Measure 2</li>
          <li class='measure'>Measure 3</li>
          <li class='measure'>Measure 4</li>
        </ul>
      <li class='risk'>Risk 6</li>
      <li class='risk'>Risk 7</li>
    </ul>
  </li>
</ul>

<强> CSS：

ul{
  list-style-type: none;
  counter-reset: foo;
}
li:before{
  counter-increment: foo;
  content: counters(foo,".") ". ";
}

Demo

多个CSS计数器未按预期工作

3 个答案:

Updated Demo.