3

我想从某个列开始添加某种背景颜色。如果可能的话，我宁愿不用为每一列使用一个 css 类，而不必这样做。

我将有一个包含数百行和大约 25 列的巨大表，我更愿意避免不必要的代码。

目前，我正在使用td:nth-of-type属性来做到这一点：

.demo tr.selectedRow td:nth-of-type(9),
.demo tr.selectedRow td:nth-of-type(10),
.demo tr.selectedRow td:nth-of-type(11),
.demo tr.selectedRow td:nth-of-type(12),
.demo tr.selectedRow td:nth-of-type(13),
.demo tr.selectedRow td:nth-of-type(14),
.demo tr.selectedRow td:nth-of-type(15),
.demo tr.selectedRow td:nth-of-type(16) {
  background-color: #fff16b;
}
<table border="1" class="demo">
  <tr>
    <td>not selected</td>
  </tr>
  <tr class="selectedRow">
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
</table>

我想知道是否有任何方法可以进一步减少这种情况。

文档没有说更多......

4

2 回答 2

10

http://css-tricks.com/examples/nth-child-tester/这个测试器真的很有帮助。看起来您想选择 9 之后的所有内容，因此请使用下面的代码

选择除前 8 个 TD 之外的所有 TD

.demo tr.selectedRow td:nth-child(n+9) {
  color: red;
}
<table border="1" class="demo">
  <tr>
    <td>not selected</td>
  </tr>
  <tr class="selectedRow">
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
</table>

于 2013-01-23T09:42:11.697 回答
0

如果八个之后的每一列，为什么你不为前八个设置一个类，而对其他的则没有。如果所有其余部分当然应该相同，这将起作用。

这甚至适用于 IE。

使用 colgroup 的示例

.colSpecial {
  background-color: #fee;
}

.colDefault {
  background-color: #fff;
  border: 1px solid black;
}

tr:hover {
  background-color: #efe;
}
<table>
  <colgroup>
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colSpecial" />
    <col class="colSpecial" />
    <col class="colSpecial" />
    <col class="colSpecial" />
    <col class="colSpecial" />
    <col class="colSpecial" />
    <col class="colSpecial" />
  </colgroup>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
</table>

于 2013-01-23T09:42:10.913 回答