下一个父母的CSS选择器

Question

我重新设计遗留应用，只更改背后的.css。 在简化的场景中，我有类似的东西：

＆＃13;

＆＃13;

table {
  border: 1px solid black;
}

div.name {
  background-color: red;
}

div+td {
  background-color: yellow;
}

＆＃13;

<table>
  <tr>
    <td>
      <div class='name'>Sean</div>
    </td>
    <td>Connery</td>
    <td>1</td>
  </tr>
  <tr>
    <td>
      <div class='name'>Pierce</div>
    </td>
    <td>Brosnan</td>
    <td>2</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

我想找到一种方法（使用纯css）在包含div = class的 td 之后立即为 td 元素设置背景颜色＆＃39;名称＆＃39 ;.换句话说，我想为“康纳里”的细胞设置背景颜色。和布鲁斯南＆＃39;

在我的示例中，我使用了选择器 div + td ，这显然是错误的。

这里是fiddle。

Answer 1

CSS中没有“下一个相同的父”选择器。您可以使用:nth-child选择器始终选择第二个td：

td:nth-child(2) {...}

table {
  border: 1px solid black;
}

div.name {
  background-color: red;
}

td:nth-child(2) {
  background-color: yellow;
}

<table>
  <tr>
    <td>
      <div class='name'>Sean</div>
    </td>
    <td>Connery</td>
    <td>1</td>
  </tr>
  <tr>
    <td>
      <div class='name'>Pierce</div>
    </td>
    <td>Brosnan</td>
    <td>2</td>
  </tr>
</table>

或（如评论中所示），将您的class="name"移至td元素并使用相邻的兄弟选择器+：

.name + td {...}

table {
  border: 1px solid black;
}

.name {
  background-color: red;
}

.name + td {
  background-color: yellow;
}

<table>
  <tr>
    <td class='name'>
      <div>Sean</div>
    </td>
    <td>Connery</td>
    <td>1</td>
  </tr>
  <tr>
    <td class='name'>
      <div>Pierce</div>
    </td>
    <td>Brosnan</td>
    <td>2</td>
  </tr>
</table>