Question

我正在构建一个类似于此的表：

＆＃13;

<head>
  <style>
    td + td {
      background-color: red
    }
  </style>
</head>

<body>
  <table style="border: solid 1px black">
    <tr>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
    <tr>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
    <tr>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
  </table>
</body>

＆＃13;

使用＆＃34; td + td＆＃34;选择一切但是第一列，对我来说效果很好。

<head>
  <style>
    td + td {
      background-color: red
    }
  </style>
</head>

现在反转什么＆＃34; td + td＆＃34;通过使用＆＃34; td：first-child＆＃34;工作得很好：

＆＃13;

<head>
  <style>
    td:first-child {
      background-color: red
    }
  </style>
</head>

<body>
  <table style="border: solid 1px black">
    <tr>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
    <tr>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
    <tr>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
  </table>
</body>

＆＃13;

然而，我正在寻找一种转向＆＃34; td + td＆＃34;周围（反向/反向）做同样的事情＆＃34; td：first-child＆＃34;确实。换句话说，我正在寻找像＆＃34; td - （td + td）＆＃34;这实际上不是一段有效的代码。所以我可以将它放入我的HTML文件中的<style></style>标签。

寻找解决方案并没有让我到任何地方，所以我在这里，嗨。

编辑：
这里基本上可以实现两个结果：
- 选择一切但是第一列
和
- 仅选择第一列两者都可以采用不同的方式。到目前为止，我已经了解了两种方法

＆＃34;选择所有BUT第一列＆＃34;

1. "td + td"
2. "td:nth-child"

和

的一种方法

＆＃34;仅选择第一列＆＃34;

1. "???"
2. "td:first-child"

我错过了＆＃34; td + td＆＃34;不使用任何版本的：nth-child或：type等（寻找一个非冒号的版本，比如＆＃34; td + td＆＃34;是）。

为什么呢？学习更多方法来提高我的整体编码技能。

Answer 1

如您所知，td + td表示该样式仅适用于直接跟随另一个表格单元格的表格单元格 - ＆gt;相邻选择器

注意：

直接跟随

没有css选择器可以应用于刚好在另一个元素之前的元素（上面的反向 - 前一个兄弟选择器）。

原因：

当浏览器获取一组必须在页面上堆叠的相邻元素时，它将按照它们在HTML中出现的顺序排列。
资料来源：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index

css选择器旨在为浏览器轻松（快速）实现。文档可以遍历一次，随时匹配元素，无需向后调整匹配

Answer 2

如果我理解正确，你需要nth-child使用奇数甚至是这样：

td:nth-child(odd){
  background-color: blue;
}
td:nth-child(even){
  background-color: green;
}
td:first-child {
   background-color: red
}

Answer 3

我认为最简单的解决方案如下：

td {
    background-color: red;
}

td:last-child {
    background-color: white;
}

HTML第一个表格列如何反转＆＃34; td + td＆＃34;？

3 个答案: