【问题标题】：How to change color in first td in my table using class如何使用类更改表中第一个 td 的颜色
【发布时间】：2016-12-18 06:44:08
【问题描述】：

我有这个表格 CSS：

table.show-my-request-table {
    border: 1px solid black;
    margin-left:auto; 
    margin-right:auto;
    border-collapse: collapse; 
}
tr.show-my-request-table-header{
    border: 1px solid black;
}
tr.show-my-request-table{
    border: 1px solid black;
}
tr.show-my-request-table:hover{
    background-color: #D3D3D3;
}

和表格 HTML：

<table class="show-my-request-table center">
    <tr class="show-my-request-table-header">
        <th>Date</th>
        <th>Priority</th> 
        <th>Question</th>
    </tr>
    <tr  >
        <td class="show-my-request-table">                                11.8.2016 15:27:13
        </td>
        <td>  
            <img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
        </td>
        <td>
        </td>
    </tr>

    <tr  >
        <td class="show-my-request-table">
            11.8.2016 14:45:41
        </td>
        <td>  
            <img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
        </td>
        <td>
            Jak se máš?
        </td>
    </tr>
</table>

我想为第一个td 标签设置一个红色背景。

我的问题是，我不知道如何只为一张桌子做。

当我尝试时：

td:first-child {
    background-color: #ff0000; 
}

它适用于所有表格。

我认为这段代码很好，但不起作用：

table.show-my-request-table > td:first-child {
    background-color: #ff0000; 
}

为什么？我该怎么做？

【问题讨论】：

标签： html css image html-table css-selectors

【解决方案1】：

您不需要使用>（直接子选择器）只需输入space

试试这个：

table.show-my-request-table td:first-child {
    background-color: #ff0000; 
}

【讨论】：

【解决方案2】：

试试这个：

table.show-my-request-table tr > td:first-child {
    background-color: #ff0000; 
}

【讨论】：

【解决方案3】：

你只需要定位表格内的元素

试试这个

table.show-my-request-table tr td:first-child {
    background-color: #ff0000; 
}

这是一个代码笔http://codepen.io/anon/pen/LkrmqK

干杯，编码愉快。

【讨论】：

【解决方案4】：

table.show-my-request-table > td:nth-child(1) {
    background: #25a3c2; 
}

【讨论】：

【解决方案5】：

/* grab 2nd row, then color the first cell */
tr:nth-child(2) td:first-child {
  background-color: #ff0000;
}

在下面查看它的实际效果

table.show-my-request-table {
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
}
tr.show-my-request-table-header {
  border: 1px solid black;
}
tr.show-my-request-table {
  border: 1px solid black;
}
tr.show-my-request-table:hover {
  background-color: #D3D3D3;
}
/* grab 2nd row, then color the first cell */

tr:nth-child(2) td:first-child {
  background-color: #ff0000;
}

<table class="show-my-request-table center">
  <tr class="show-my-request-table-header">
    <th>Date</th>
    <th>Priority</th>
    <th>Question</th>
  </tr>

  <tr>
    <td class="show-my-request-table">

      11.8.2016 15:27:13

    </td>
    <td>
      <img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
    </td>
    <td>

    </td>
  </tr>

  <tr>
    <td class="show-my-request-table">

      11.8.2016 14:45:41

    </td>
    <td>
      <img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
    </td>
    <td>
      Jak se máš?
    </td>
  </tr>

【讨论】：

【解决方案6】：

table.show-my-request-table > td:first-child {
    background-color: #ff0000; 
}

此选择器尝试定位td，它是table 元素的直接子元素。正如您自己的代码所示：

<table class="show-my-request-table center">
    <!-- snip -->
    <tr  >
        <td class="show-my-request-table">

它们之间存在（并且必须存在）tr 元素。但这还不是全部：HTML 解析器还将静默插入一个tbody 元素作为tr 的父元素（除非您明确包含<thead> 或<tbody> 标记）。 <tbody> 标签在 HTML 中是可选的，但 element 不是，因此如果标签缺失，解析器将简单地添加元素。

解决方法是使用descendant selector:

table.show-my-request-table td:first-child {
    background-color: #ff0000; 
}

敏锐的观察者会注意到 > 组合器已被（空格）组合器取代。

【讨论】：