伪类选择器

伪类选择器

CSS中的伪类选择器就是前面带有冒号(:)的选择器。举例来说，伪类选择器:first-child和:last-child可以分别从父元素中选择第一个和最后一个子元素。

另一个例子是:nth-child，它可以用于选择元素列表或HTML表格中属于同一行或同一列的元素。

代码实现

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>2.伪类选择器</title>
    <style>
        div {
            margin: 20px;
        }

        table {
            border-collapse: collapse;
        }

        table tr td {
            width: 100px;
            height: 10px;
        }

        div table tr td:nth-child(2) {
            width: 20px;
        }

        #container1 table tr td:nth-child(2) {
            background-color: springgreen;
        }

        #container2 table tr:nth-child(2) td:nth-child(2) {
            background-color: springgreen;
        }

        #container3 table tr:nth-child(2) {
            background-color: springgreen;
        }

        #container4 table tr:nth-child(4) td:nth-child(4) {
            background-color: springgreen;
        }

        #container5 table * {
            background-color: springgreen;
        }
    </style>
</head>

<body>
    <div id="container1">
        <table border>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    <div id="container2">
        <table border>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    <div id="container3">
        <table border>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    <div id="container4">
        <table border>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    <div id="container5">
        <table border>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</body>

</html>

页面效果