CSS 下一个相同父项的选择器

Question

我正在重新设计一个遗留应用程序，只更改它后面的 .css。在一个简化的场景中，我有这样的东西：

table {
  border: 1px solid black;
}

div.name {
  background-color: red;
}

div+td {
  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>

我想找到一种方法（使用纯 css）在 td[= 之后立即为 td 元素设置背景颜色31=] 包含 div 和 class='name'。换句话说，我想为 'Connery' 和 'Brosnan'.

的单元格设置背景颜色
在我的示例中，我使用了选择器 div + td，这显然是错误的。

这里是fiddle.

Answer 1

"next same parent" select 或 CSS 中没有。您可以使用 :nth-child select 或始终 select 第二个 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 元素并使用相邻的同级元素 select 或 +:

.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>

CSS 下一个相同父项的选择器

CSS selector for the next same parent

html

css

css-selectors

selector