Question

我有一个像这样的表结构

<table>
    <tr>
        <td>Name</td>
        <td>Info</td>
        <td>Surmane</td>
    </tr>
    <tr>
        <td>A</td>
        <td>
            <table>
                <tr>
                    <td>Id</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td>AA</td>
                </tr>
                <tr>
                    <td>Age</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>Address</td>
                    <td>AAA</td>
                </tr>
            </table>
        </td>
        <td>AAAA</td>
    </tr>
    <tr>
        <td>B</td>
        <td>
            <table>
                <tr>
                    <td>Id</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td>BB</td>
                </tr>
                <tr>
                    <td>Age</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>Address</td>
                    <td>BBB</td>
                </tr>
            </table>
        </td>
        <td>BBBB</td>
    </tr>
    <tr>
        <td>C</td>
        <td>
            <table>
                <tr>
                    <td>Id</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td>CC</td>
                </tr>
                <tr>
                    <td>Age</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>Address</td>
                    <td>CCC</td>
                </tr>
            </table>
        </td>
        <td>CCCC</td>
    </tr>
</table>

现在我想使用css更改第一个表 - ＆gt;第一行（Name，Info，Surname）的颜色。 css不应该影响第二个表 - ＆gt;第一行（Id，10）

请建议我任何想法感谢

Answer 1

:not(td) > table > tbody > tr:first-child td {
   color: red
}

由于没有关于父级，兄弟级和外部标记的信息，我已将:not(td)指定为最外层表的可承认直接父级（即除了td 之外的任何元素）

此外，由于你还有内部表，我必须指定> tbody >，因为浏览器通常会自动插入一个tbody元素，如果没有它，选择器也会匹配内部表的第一行（其中{指定了{1}}。

Codepen：http://codepen.io/anon/pen/vEPLEb

结果

enter image description here

Answer 2

使用内联css的最简单答案：

<tr style="color:red;">
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>

Answer 3

如何将类添加到第一个<tr>，例如<tr class="color">，然后只需使用.color { color: #fff; }更改颜色？

Answer 4

您可以使用css

更改颜色

<table>
        <tr>
            <td style="color:red;">Name</td>
            <td style="color:red;">Info</td>
            <td style="color:red;">Surmane</td>
        </tr>
        <tr>
            <td>A</td>
            <td>
                <table>
                    <tr>
                        <td>Id</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>Name</td>
                        <td>AA</td>
                    </tr>
                    <tr>
                        <td>Age</td>
                        <td>25</td>
                    </tr>
                    <tr>
                        <td>Address</td>
                        <td>AAA</td>
                    </tr>
                </table>
            </td>
            <td>AAAA</td>
        </tr>
        <tr>
            <td>B</td>
            <td>
                <table>
                    <tr>
                        <td>Id</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>Name</td>
                        <td>BB</td>
                    </tr>
                    <tr>
                        <td>Age</td>
                        <td>25</td>
                    </tr>
                    <tr>
                        <td>Address</td>
                        <td>BBB</td>
                    </tr>
                </table>
            </td>
            <td>BBBB</td>
        </tr>
        <tr>
            <td>C</td>
            <td>
                <table>
                    <tr>
                        <td>Id</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>Name</td>
                        <td>CC</td>
                    </tr>
                    <tr>
                        <td>Age</td>
                        <td>25</td>
                    </tr>
                    <tr>
                        <td>Address</td>
                        <td>CCC</td>
                    </tr>
                </table>
            </td>
            <td>CCCC</td>
        </tr>
    </table>

Answer 5

试试这个：

＆＃13;

.hey {
    color: red;
}

＆＃13;

<table>
    <tr class="hey">
        <td>Name</td>
        <td>Info</td>
        <td>Surmane</td>
    </tr>
    <tr>
        <td>A</td>
        <td>
            <table>
                <tr>
                    <td>Id</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td>AA</td>
                </tr>
                <tr>
                    <td>Age</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>Address</td>
                    <td>AAA</td>
                </tr>
            </table>
        </td>
        <td>AAAA</td>
    </tr>
    <tr>
        <td>B</td>
        <td>
            <table>
                <tr>
                    <td>Id</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td>BB</td>
                </tr>
                <tr>
                    <td>Age</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>Address</td>
                    <td>BBB</td>
                </tr>
            </table>
        </td>
        <td>BBBB</td>
    </tr>
    <tr>
        <td>C</td>
        <td>
            <table>
                <tr>
                    <td>Id</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td>CC</td>
                </tr>
                <tr>
                    <td>Age</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>Address</td>
                    <td>CCC</td>
                </tr>
            </table>
        </td>
        <td>CCCC</td>
    </tr>
</table>

＆＃13;

Answer 6

您应该为所需的标记设置类或ID，并在css中设置背景如下（如果有帮助，请将答案标记为正确）：

 <!DOCTYPE html>
<html>
<head>
<style>
.TestClass{
    background-color: yellow;
}
</style>
</head>
<table>
            <tr class="TestClass">
                <td>Name</td>
                <td>Info</td>
                <td>Surmane</td>
            </tr>
            <tr>
                <td>A</td>
                <td>
                    <table>
                        <tr>
                            <td>Id</td>
                            <td>10</td>
                        </tr>
                        <tr>
                            <td>Name</td>
                            <td>AA</td>
                        </tr>
                        <tr>
                            <td>Age</td>
                            <td>25</td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td>AAA</td>
                        </tr>
                    </table>
                </td>
                <td>AAAA</td>
            </tr>
            <tr>
                <td>B</td>
                <td>
                    <table>
                        <tr>
                            <td>Id</td>
                            <td>10</td>
                        </tr>
                        <tr>
                            <td>Name</td>
                            <td>BB</td>
                        </tr>
                        <tr>
                            <td>Age</td>
                            <td>25</td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td>BBB</td>
                        </tr>
                    </table>
                </td>
                <td>BBBB</td>
            </tr>
            <tr>
                <td>C</td>
                <td>
                    <table>
                        <tr>
                            <td>Id</td>
                            <td>10</td>
                        </tr>
                        <tr>
                            <td>Name</td>
                            <td>CC</td>
                        </tr>
                        <tr>
                            <td>Age</td>
                            <td>25</td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td>CCC</td>
                        </tr>
                    </table>
                </td>
                <td>CCCC</td>
            </tr>
        </table>
</body>
</html>

Answer 7

td > table tr:first-child td {
    background: none;
}
tr:first-child td {
    background:#ff0000;
}

如何使用css更改第一个表的第一行的颜色

7 个答案: