css5.子元素选择器

最新推荐文章于 2022-10-30 12:46:06 发布

时光无错孤独难谈

最新推荐文章于 2022-10-30 12:46:06 发布

阅读量267

点赞数

分类专栏： html5 && css

本文链接：https://blog.youkuaiyun.com/qq_43745403/article/details/104291880

版权

html5 && css 专栏收录该内容

23 篇文章

订阅专栏

本文深入探讨了CSS选择器的应用，包括:first-child、:last-child、:nth-child等高级选择器的使用技巧，以及如何通过:first-of-type、:last-of-type和:nth-of-type精确定位元素。此外，还讲解了兄弟选择器的语法及其在网页布局中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <style type="text/css">
            /* 
                为第一个p设置颜色
                    :first-child  第一个子元，不考虑父元素
             */
            body > p:first-child{
                background-color: darkmagenta;
            }
            body > p:last-child{
                background-color: red;
            }
            /* 
                选择任意位置的子元素
                    :nth-child(even)  选取偶数位置
                    :nth-child(odd)   选择奇数位置
            */
            p:nth-child(3){
                background-color: darkorange;
            }
        
            
            /* 
                p类的第一个元素

                :first-of-type
                :last-of-type
                :nth-of-type
             */
            p:first-of-type{
                background-color: aquamarine;
            }
            /* child:所有子元素, type:指定类型*/
        </style>


        <!-- 
            兄弟选择器：（后一个兄弟选择器）
                作用：可以选中一个元素后紧挨着的指定的兄弟元素
                语法  
                span + p{                      (span后面的p元素为红色，只选择后一个)
                    background-color:red;
                }

                span ~ p{                      (span后面的所有p元素为红色)
                    background-color:red;
                }
         -->
    </head>


    <body>
        <span>我是一个</span>
        <P>我是一个p标签</P>
        <P>我是一个p标签</P>
        <P>我是一个p标签</P>
        <P>我是一个p标签</P>

        <div>
            <p>p标签</p>
        </div>


        <P>我是一个p标签</P>
        <P>我是一个p标签</P>

    </body>


</html>