Question

我担心答案是否定的，但只是想尝试确认。

我正在设置表格的每一行都有灰色背景。

table tr:nth-child(odd) {
    background-color: #eee;
}

这很好用，但表中还有嵌入的标题行。我希望奇数/偶数模式重置并在每个标题行后重新开始。

我真正想要的是我可以分配给标题行的样式，以指示行号应该在下一行的1处重新开始。

是否有任何CSS样式指定奇数/偶数行跟踪应该以这种方式重置？

注意：我知道我可以转向jQuery或向表中的行添加自定义类。我只是希望获得仅限CSS的解决方案。

修改

有些人要求我应该如何制定表格。所以我会在这里做。我不明白这有什么帮助，因为一个表是非常基本的，我认为很明显所有行都是彼此的兄弟。

<table>
    <tr class="SectionHeader">
        <th>
        </th>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr class="SectionHeader">
        <th>
        </th>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr class="SectionHeader">
        <th>
        </th>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
</table>

Answer 1

CSS中最接近动态值的是计数器，但计数器不能与选择器一起使用。除动态伪类外，选择器主要是静态的。您无法使用CSS设置任意值，这将影响选择器与元素的匹配方式。

正如评论中所建议的，使用多个ln -s XcodeDefault.xctoolchain OSX10.10.xctoolchain元素可以更好地表示您的表结构，每个元素对应一个元素。这将还允许您现有的tbody选择器匹配正确的行元素：

:nth-child()

省略了结束标签以保持清洁;仅供参考，这是完全有效的HTML
我保留了＆＃34; SectionHeader＆＃34;来自原始标记的类名，但请注意每个标题单元格上的<table> <tbody> <tr class="SectionHeader"> <th scope="rowgroup"> <tr> <td> <tbody> <tr class="SectionHeader"> <th scope="rowgroup"> <tr> <td> <tr> <td> <tbody> <tr class="SectionHeader"> <th scope="rowgroup"> <tr> <td> <tr> <td> </table>属性提供了类名称不适用的相应语义

Answer 2

由于您没有演示DOM，我将提供一个依赖于特定DOM结构的解决方案：

如果您可以使用<thead>和<tbody>元素，则问题就变得微不足道了。

tbody tr:nth-child(even) {
  background: gray;
}

<table>
  <tr>
    <th>Header element</th>
    <th>Header element</th>
  </tr>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
  </tbody>
  <tr>
    <th>Header element</th>
    <th>Header element</th>
  </tr>
  <tbody>
    <tr>
      <td>Longer Than The Usual John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>

Answer 3

由于共识似乎是单独使用CSS而不改变表格的布局，所以我无法帮助但迎接挑战，所以就是这样。

＆＃13;

tr.SectionHeader,
tr.SectionHeader + tr:not(.SectionHeader) + tr:not(.SectionHeader),
tr.SectionHeader + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader),
tr.SectionHeader + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader),
tr.SectionHeader + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader),
tr.SectionHeader + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader),
tr.SectionHeader + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader),
tr.SectionHeader + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) {
  background:#EEE}

＆＃13;

<table>
    <tr class="SectionHeader">
        <th>hdr
        </th>
    </tr>
    <tr class="SectionHeader">
        <th>hdr
        </th>
    </tr>
    <tr>
        <td>cell
        </td>
    </tr>
    <tr class="SectionHeader">
        <th>hdr
        </th>
    </tr>
    <tr>
        <td>cell
        </td>
    </tr>
    <tr>
        <td>cell
        </td>
    </tr>
    <tr class="SectionHeader">
        <th>hdr
        </th>
    </tr>
    <tr>
        <td>cell
        </td>
    </tr>
    <tr>
        <td>cell
        </td>
    </tr>
    <tr>
        <td>cell
        </td>
    </tr>
    <tr class="SectionHeader">
        <th>hdr
        </th>
    </tr>
    <tr>
        <td>cell
        </td>
    </tr>
    <tr>
        <td>cell
        </td>
    </tr>
    <tr>
        <td>cell
        </td>
    </tr>
    <tr>
        <td>cell
        </td>
    </tr>
</table>

＆＃13;

（适用于最多14个非标题行的序列。如果您需要更多，只需添加更多CSS。）

重置HTML表格中的奇数/偶数序列

3 个答案: