＜css3-子元素序列选择器＞

最新推荐文章于 2023-10-14 20:18:49 发布

好先生·

最新推荐文章于 2023-10-14 20:18:49 发布

阅读量307

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_45540964/article/details/109614089

版权

css 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 儿子序列选择器 -->
    <style type="text/css">
        /*给是p的第一个元素进行选择
         必须保证p是第一个子元素
         如果不是则无法选中
        */
        p:first-child {
            background: pink;
        }

        /*h3不是子元素中的第一个
          不会被选中
        */
        h3:first-child {
            background: green;
        }

        /*item会被选中*/
        .item:first-child {
            background: orange;
        }

        /*选取最后一个*/
        .item:last-child {
            background: red;
        }
        h3:last-child {
            line-height: 50px;
        }

        /*选取偶数
            p中的偶数都会被选中
        */
        p:nth-child(even) {
            background: purple;
        }

        /*选取基数
            p中的奇数被选中
        */
        p:nth-child(odd) {
            background: brown;
        }

        /*选取指定的某一个
         从1开始算
            1,2,3...
        */
        p:nth-child(1) {
            line-height: 50px;
        }

        /*4个为一组,每组的第一个被选中
            默认从前面开始选择
            n从0开始计算 0,1,2..
        */
        p:nth-child(4n+1) {
            border: 5px solid #000;
        }

        /*分组,从后面开始选择
            受到后面h3的影响计算是从最后面开始
        */
        p:nth-last-child(3n+1) {
            background: skyblue;
        }

    </style>
</head>
<body>
    <div>
        <p class="item">1-1</p>
        <p class="item">2-2</p>
        <p class="item">3-3</p>
        <p class="item">4-4</p>
        <p class="item">5-5</p>
        <p class="item">6-6</p>
        <p class="item">7-7</p>
        <p class="item">8-8</p>
        <p class="item">9-9</p>
        <p class="item">10-10</p>
        <h3 class="item">1-1</h3>
        <h3 class="item">2-2</h3>
        <h3 class="item">3-3</h3>
        <h3 class="item">4-4</h3>
        <h3 class="item">5-5</h3>
    </div>
</body>
</html>```

好先生·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
＜css3-子元素序列选择器＞

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>  <style ty.
复制链接

扫一扫