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

zte4gxcn  于 2022-11-27  发布在  其他
关注(0)|答案(6)|浏览(164)

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

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

mlnl4t2r

mlnl4t2r1#

试试这个:

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

wyyhbhjk2#

您不需要使用>(直接子选择器),只需将space
试试这个:

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

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; 
}

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

llew8vvj

llew8vvj4#

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

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

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

vkc1a9a2

vkc1a9a25#

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

ar7v8xwq6#

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

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

第一次

相关问题