时间戳

首页 > 解决方案 > 如何使用 CSS“nth-child”选择器选择自定义行数？

html - 如何使用 CSS“nth-child”选择器选择自定义行数？

问题描述

基本上我想选择自定义行并更改它们的背景颜色，但我似乎找不到任何相关信息。我可以做odd,even和其他一些公式，但不能做自定义选择。我阅读了这个问题及其答案以及这篇 W3Schools 文章，但似乎没有自定义选择的选项。我能找到的只有公式和奇数/偶数子选择器。

我有以下代码，其中我选择even了孩子的数量，但这不是我想要的。我想随机选择行并更改它们的背景颜色。下面代码中的表格是整个表格，我不需要更多的行/列。假设我想随机选择以下行：

我知道的唯一选择方法是nth-child选择器，但我似乎无法选择上面提到的行。我如何只选择那些行？

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                text-align: center;
                border-collapse: collapse;
                width: 30%;
            }
            td, th {
                border: 1px solid grey;
                padding: 5px;
            }
            tr:nth-child(even) {
                background-color: lightgrey;
            }

        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Date</th>
                <th>Name</th>
                <th>Marks</th>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>AAA</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>BBB</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>CCC</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>DDD</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>EEE</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>FFF</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>GGG</td>
                <td>000</td>
            </tr>
        </table>
    </body>
</html>

标签： htmlcsshtml-tablecss-selectorsbackground-color

解决方案

为此，您必须手动指定元素，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                text-align: center;
                border-collapse: collapse;
                width: 30%;
            }
            td, th {
                border: 1px solid grey;
                padding: 5px;
            }
            tr:nth-child(2), 
            tr:nth-child(3), 
            tr:nth-child(5) {
                background-color: lightgrey;
            }

        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Date</th>
                <th>Name</th>
                <th>Marks</th>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>AAA</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>BBB</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>CCC</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>DDD</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>EEE</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>FFF</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>GGG</td>
                <td>000</td>
            </tr>
        </table>
    </body>
</html>
如您所见，包含 AAA、BBB、DDD 的单元格现在具有灰色背景，因为在 CSS 中我们专门选择了第二个、第三个和第五个孩子。

推荐阅读