CSS选择奇数子元素|极客教程

CSS选择奇数子元素

在前端开发中，我们经常会遇到需要对一组元素中的奇数子元素进行样式设置的情况，这时候就可以使用CSS选择器来实现。通过CSS选择奇数子元素，我们可以方便地对页面中的元素进行样式设置，使页面看起来更加美观和统一。

使用:nth-child选择器选择奇数子元素

在CSS中，我们可以使用:nth-child选择器来选择元素的子元素，并通过传入参数来选择特定的子元素。当我们想要选择奇数子元素时，只需要在:nth-child(odd)中传入odd参数即可。

示例代码如下：

/* 选择奇数子元素 */
li:nth-child(odd) {
    background-color: #f2f2f2;
}

在上面的示例代码中，我们通过:nth-child(odd)选择器选择了li元素的奇数子元素，并将其背景色设为#f2f2f2。这样，页面中的奇数子元素就会有一个灰色的背景色。

实际应用场景

列表元素

在网页开发中，我们经常会用到列表元素（如ul、ol等），如果我们想要对列表中的奇数行进行样式设置，就可以使用:nth-child选择器来实现。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Odd List Items</title>
    <style>
        /* 选择奇数行 */
        li:nth-child(odd) {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>Odd List Items</h1>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</body>
</html>

上面的示例代码中，我们通过:nth-child(odd)选择器选择了ul元素中的奇数行（li元素），并将其背景色设为#f2f2f2。这样，列表中的奇数行就会有一个灰色的背景色。

表格元素

另一个常见的应用场景是表格元素，当我们想要对表格中的奇数行进行样式设置时，也可以使用:nth-child选择器来实现。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Odd Table Rows</title>
    <style>
        /* 选择奇数行 */
        tr:nth-child(odd) {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>Odd Table Rows</h1>
    <table>
        <tr>
            <td>Row 1, Data 1</td>
            <td>Row 1, Data 2</td>
        </tr>
        <tr>
            <td>Row 2, Data 1</td>
            <td>Row 2, Data 2</td>
        </tr>
        <tr>
            <td>Row 3, Data 1</td>
            <td>Row 3, Data 2</td>
        </tr>
    </table>
</body>
</html>

在上面的示例代码中，我们通过:nth-child(odd)选择器选择了表格中的奇数行（tr元素），并将其背景色设为#f2f2f2。这样，表格中的奇数行就会有一个灰色的背景色。