使用第n种类型的计数器

Question

是否可以使用nth-type这样的计数器：

td:nth-of-type(counter(section)):before { 
     content: "Date"counter(section); 
     counter-increment: section;
}

计数器初始化为

#myTable  tr { 
    border: 1px solid #ccc; 
    counter-reset: section;counter-increment: section;
}

我正在尝试做的是 - 检查tr是否具有类iR，如果是，则结构如下所示：

table.myTable td:nth-of-type(1):before { content: "Date"; }
table.myTable td:nth-of-type(2):before { content: "Fajr"; }
table.myTable td:nth-of-type(3):before { content: "Fr"; }
table.myTable td :nth-of-type(4):before { content: "Se"; }
table.myTable td:nth-of-type(5):before { content: "Dr"; }
table.myTable td:nth-of-type(6):before { content: " "; }
table.myTable td:nth-of-type(7):before { content: "A"; }
table.myTable td:nth-of-type(8):before { content: " "; }
table.myTable td:nth-of-type(9):before { content: "Mb"; }
table.myTable td:nth-of-type(10):before { content: " "; }
table.myTable td:nth-of-type(11):before { content: "I"; }
table.myTable td:nth-of-type(12):before { content: ""; }

如果不是，那将是这样的

table.myTable td:nth-of-type(1):before { content: "Date"; }
table.myTable td:nth-of-type(2):before { content: "Fr"; }
table.myTable td :nth-of-type(3):before { content: "Se"; }
table.myTable td:nth-of-type(4):before { content: "Dr"; }
table.myTable td:nth-of-type(5):before { content: "A"; }
table.myTable td:nth-of-type(6):before { content: "Mb"; }
table.myTable td:nth-of-type(7):before { content: "I"; }

这是我想要做的事情 https://jsfiddle.net/wj5gnafm/1/

Answer 1

根据现在提供的小提琴，您甚至不需要counter。你应该能够通过使用我在原始答案中提到的类和否定选择器来实现这一点。以下是一个示例代码段。

＆＃13;

＆＃13;

td {
  border: 1px solid;
}
table tr.iRow td:nth-of-type(1):before {
  content: 'Date ';
}
table tr.iRow td:nth-of-type(2):before {
  content: 'Fr ';
}
table tr.iRow td:nth-of-type(3):before {
  content: '';
}
table tr.iRow td:nth-of-type(4):before {
  content: 'Se ';
}
table tr.iRow td:nth-of-type(5):before {
  content: 'Dr ';
}
table tr.iRow td:nth-of-type(6):before {
  content: '';
}
table tr.iRow td:nth-of-type(7):before {
  content: 'A ';
}
table tr.iRow td:nth-of-type(8):before {
  content: '';
}
table tr.iRow td:nth-of-type(9):before {
  content: 'Mb ';
}
table tr.iRow td:nth-of-type(10):before {
  content: '';
}
table tr.iRow td:nth-of-type(11):before {
  content: 'I ';
}
table tr.iRow td:nth-of-type(12):before {
  content: '';
}
table tr:not(.iRow) td:nth-of-type(1):before {
  content: 'Date ';
}
table tr:not(.iRow) td:nth-of-type(2):before {
  content: 'Fr ';
}
table tr:not(.iRow) td:nth-of-type(3):before {
  content: 'Se ';
}
table tr:not(.iRow) td:nth-of-type(4):before {
  content: 'Dr ';
}
table tr:not(.iRow) td:nth-of-type(5):before {
  content: 'A ';
}
table tr:not(.iRow) td:nth-of-type(6):before {
  content: 'Mb ';
}
table tr:not(.iRow) td:nth-of-type(7):before {
  content: 'I ';
}

＆＃13;

<table>
  <tr class='iRow'>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
    <td>I</td>
    <td>J</td>
    <td>K</td>
    <td>L</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
    <td>E</td>
    <td>E</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

回答原始问题：

正如我在对该问题的评论中所提到的，您无法将计数器的值作为参数传递给nth-of-type（或任何其他nth-*）选择器。

只有当所需的类存在时（通过使用类选择器）并使用counter-increment递增另一个计数器，才能通过执行:not([classname])来实现预期的输出。

在显示值时，在选择器中使用类或类否定，然后根据需要显示值。以下是一个示例代码段。

＆＃13;

＆＃13;

table {
  counter-reset: section, section-other;
}
table, tr, td {
  border: 1px solid;
}
table tr.iRow {
  counter-increment: section;
  background: sandybrown; /* just for distinction */
}
table .iRow td:nth-of-type(1):before {
  content: "Foo." counter(section)" ";
}
table .iRow td:nth-of-type(2):before {
  content: "Bar." counter(section)" ";
}
table .iRow td:nth-of-type(3):before {
  content: "Baz." counter(section)" ";
}
table tr:not(.iRow) {
  counter-increment: section-other;
  background: wheat; /* just for distinction */
}
table tr:not(.iRow) td:nth-of-type(1):before {
  content: "ooF." counter(section-other)" ";
}
table tr:not(.iRow) td:nth-of-type(2):before {
  content: "raB." counter(section-other)" ";
}
table tr:not(.iRow) td:nth-of-type(3):before {
  content: "zaB." counter(section-other)" ";
}

＆＃13;

<table>
  <tr class='iRow'>
    <td>A</td><td>B</td><td>C</td>
  </tr>
  <tr class='iRow'>
    <td>A</td><td>B</td><td>C</td>
  </tr>
  <tr>
    <td>A</td><td>B</td><td>C</td>  
  </tr>
  <tr class='iRow'>
    <td>A</td><td>B</td><td>C</td>  
  </tr>
  <tr>
    <td>A</td><td>B</td><td>C</td>  
  </tr>
  <tr class='iRow'>
    <td>A</td><td>B</td><td>C</td>  
  </tr>
  <tr>
    <td>A</td><td>B</td><td>C</td>  
  </tr>
  <tr>
    <td>A</td><td>B</td><td>C</td>  
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;