HTML第一个表格列如何反转" td + td"?

时间:2015-12-04 10:24:46

标签: html css html-table

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



<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;
&#13;
&#13;

使用&#34; td + td&#34;选择一切但是第一列,对我来说效果很好。

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

现在反转什么&#34; td + td&#34;通过使用&#34; td:first-child&#34;工作得很好:

&#13;
&#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;
&#13;
&#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;是)。

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

3 个答案:

答案 0 :(得分: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选择器旨在为浏览器轻松(快速)实现。文档可以遍历一次,随时匹配元素,无需向后调整匹配

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

td {
    background-color: red;
}

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