如何使用类更改表中第一个 td 的颜色

Posted 2023-03-06

【中文标题】如何使用类更改表中第一个 td 的颜色

【英文标题】：How to change color in first td in my table using class

【发布时间】：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; 

为什么？我该怎么做？

【参考方案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; 

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