Question

我有以下情况：

<table>
  <tr class="header">
  <tr class="data1">
  <tr class="data2">
  <tr class="data3">
  <tr class="header">
  <tr class="data1">
  <tr class="data2">
</table>

我想将第一个标题下的data元素的文字颜色更改为蓝色，将第二个标题下的data元素的文字颜色更改为红色。

我尝试了各种nth-child和相邻的兄弟（+），但我的所有尝试都不完整。

tr[class^=data]获取了我想要影响的所有元素，但我需要分两组。

我不知道我会有多少data个元素，我知道我只有2 header

我不能在这里使用javascript / jquery，只选择

Answer 1

如果您知道只有两个标题行，则可以让第二组数据行的样式覆盖第一组数据行的样式：

.header ~ tr[class^=data] {
  color: #f00;
}

.header ~ .header ~ tr[class^=data] {
  color: #00f;
}

如果您可以修改HTML，只需将标题和数据行分组到tbody元素中，您就不必担心只仔细选择与每个标题相关联的行：

＆＃13;

tbody:first-child td {
  color: #f00;
}

tbody:last-child td {
  color: #00f;
}

＆＃13;

<table>
  <tbody>
    <tr class="header"><th>Header
    <tr class="data1"><td>Data1
    <tr class="data2"><td>Data2
    <tr class="data3"><td>Data3
  <tbody>
    <tr class="header"><th>Header
    <tr class="data1"><td>Data1
    <tr class="data2"><td>Data2
</table>

＆＃13;

用于匹配条件的特定元素的兄弟节点的选择器

1 个答案: