CSS结构伪类选择器

最新推荐文章于 2025-08-27 00:04:04 发布

原创最新推荐文章于 2025-08-27 00:04:04 发布 · 188 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了CSS中的结构伪类选择器，包括:first-child, :last-child, :nth-child(n), :nth-last-child(n)等，通过实例解析它们在网页布局和元素样式控制中的应用，帮助开发者更好地实现动态和响应式设计。" 119351055,8545089,Vue实现蜂窝布局与背景切换特效,"['Vue', '前端框架', '网页特效']

    <style>

        /*ul的第一个子元素*/
        ul li:first-child{
            background-color: yellow;
        }

        /*ul的最后一个子元素*/
        ul li:last-child{
            background-color: red;
        }

        /*选中p1 :按顺序选择
        定位到p的父元素，选择父元素的第一个子元素，并且这个元素是p标签，才能生效*/
        p:nth-child(1){
            background-color: blue;
        }

        /*选中p2：按类型选择
        定位到父元素，选中父元素下的p元素的第二个*/
        p:nth-of-type(2){
            background-color: green;
        }

    </style>

</head>
<body>

    <p>p1</p>
    <p>p2</p>
    <p>p3</p>

    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>

</body>