如何使用 CSS "nth-child" select 或 select 自定义行数？

Question

基本上我想 select 自定义行并更改它们 background-color，但我似乎找不到任何相关信息。我可以做 odd、even 和其他一些公式，但不能做自定义 selection。我读过 this question and its answers and also This W3Schools article 但似乎没有自定义 selection 的选项。我能找到的只有公式和 odd/even child select ors.

我有以下代码，其中我有 selected even 个 children 但是这不是我想要的.我想随机 select 行并更改它们的 background-color。下面代码中的 table 是整个 table，我不需要更多 rows/columns。假设我想随机 select 以下行：

AAA
有BBB的那个
有 DDD

我知道的 selection 的唯一方法是 nth-child select 或者但我似乎无法 select 我上面提到的行。我如何仅 select 那些行？

<!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>

Answer 1

传入你要选择的元素的索引即可。像“tr:nth-child(3)”会给你索引为 3 的元素。

Answer 2

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

<!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 中我们专门选择了第二个、第三个和第五个 child。

Answer 3

你应该 select tr 的第二个 child 并且它会 select AAA, BBB, CCC 参考：https://js-demo.com/index.php?ref=01e519ca937a

Answer 4

我知道已经给出了一些答案和建议，但是如果您仍然想用 CSS 代码解决这个问题，那么我建议您看一下生成 :nth-child 选择器。这是生成您想要的选择器的一种快速简便的方法。

CSS 第 n 个子生成器： https://nthchild.kawalekkodu.pl/en/

备选第 n 个子测试器：https://css-tricks.com/examples/nth-child-tester/

它帮助了我很多次。也可能帮助其他人。

如何使用 CSS "nth-child" select 或 select 自定义行数？

How to select custom number of rows using CSS "nth-child" selector?

html

css

html-table

css-selectors

background-color