伪类选择器

阿立聊代码

于 2024-09-15 11:45:58 发布

阅读量137

点赞数 3

分类专栏： CSS图鉴文章标签：伪类选择器 CSS3

本文链接：https://blog.csdn.net/qq_36324341/article/details/142282150

版权

CSS图鉴专栏收录该内容

2 篇文章 0 订阅

订阅专栏

伪类选择器

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>