Question

我需要使用我的属性设置第一个表格行的样式，但我无法弄明白。

请看一下代码 - 知道“蓝色”行不是蓝色的原因吗？

感谢。

#myTable tr[data-somedata] > td {
  background-color: red;
}

#myTable tr[data-somedata] > td ~ #myTable tr[data-somedata] > td {
  background-color: blue;
}

<table id='myTable'>
  <tr>
    <td>This should be normal</td>
  </tr>
  <tr>
    <td>This should be normal</td>
  </tr>
  <tr data-somedata>
    <td>This should be red</td>
  </tr>
  <tr data-somedata>
    <td>This should be blue</td>
  </tr>
  <tr data-somedata>
    <td>This should be blue</td>
  </tr>
</table>

Answer 1

这是因为您的选择器适用于td兄弟姐妹，但td这里不是兄弟姐妹，兄弟姐妹是tr。因此，您必须修复您的选择器以使用兄弟tr，然后应用后代或子选择器。

#myTable tr[data-somedata] > td {
  background-color: red;
}

#myTable tr[data-somedata] ~ tr[data-somedata] > td {
  background-color: blue;
}

<table id='myTable'>
  <tr>
    <td>This should be normal</td>
  </tr>
  <tr>
    <td>This should be normal</td>
  </tr>
  <tr data-somedata>
    <td>This should be red</td>
  </tr>
  <tr data-somedata>
    <td>This should be blue</td>
  </tr>
  <tr data-somedata>
    <td>This should be blue</td>
  </tr>
</table>

Answer 2

您错误地选择了要跟随的路径。 tr是sibbling，你需要选择下一个：tr ~tr。

#myTable tr[data-somedata] > td {
  background-color: red;
}

#myTable tr[data-somedata]   ~   tr[data-somedata] > td {
  background-color: blue;
}

<table id='myTable'>
  <tr>
    <td>This should be normal</td>
  </tr>
  <tr>
    <td>This should be normal</td>
  </tr>
  <tr data-somedata>
    <td>This should be red</td>
  </tr>
  <tr data-somedata>
    <td>This should be blue</td>
  </tr>
  <tr data-somedata>
    <td>This should be blue</td>
  </tr>
</table>

你的选择者

#myTable tr[data-somedata] > td ~ #myTable tr[data-somedata] > td

在tr中查找td，其中包含属性data-somedata child of table（#myTable）WICH位于另一个td之后的td中，该td位于tr中，属性data-somedata本身为#myTable的子项。这里有点太多了:)）

如何获得具有属性的第一个孩子（td）？

2 个答案: