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

zte4gxcn 于 2022-11-27 发布在其他

关注(0)|答案(6)|浏览(165)

我有这个表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; 
}

为什么？我怎么能这么做？

css

来源：https://stackoverflow.com/questions/38897851/how-to-change-color-in-first-td-in-my-table-using-class

6条答案

按热度按时间

mlnl4t2r1#

试试这个：

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

赞(0）回复(0）举报 2022-11-27

wyyhbhjk2#

您不需要使用>（直接子选择器），只需将space
试试这个：

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

赞(0）回复(0）举报 2022-11-27

v2g6jxz63#

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

此选择器尝试将td作为table元素的 direct 子元素。如您自己的代码所示：

<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 选择器：

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

敏锐的观察者会注意到>组合子已经被``（空间）组合子所取代。

赞(0）回复(0）举报 2022-11-27

llew8vvj4#

您只需要将表中的元素作为目标
试试这个

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

这是一支密码笔http://codepen.io/anon/pen/LkrmqK
干杯，快乐编码。

赞(0）回复(0）举报 2022-11-27

vkc1a9a25#

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

赞(0）回复(0）举报 2022-11-27

ar7v8xwq6#

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

请在下面观看它的实际应用

第一次

赞(0）回复(0）举报 2022-11-27

我来回答

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

6条答案

请在下面观看它的实际应用

相关问题

热门标签

最新问答