css5.子元素选择器

最新推荐文章于 2023-03-05 21:39:18 发布

时光无错孤独难谈

最新推荐文章于 2023-03-05 21:39:18 发布

阅读量201

点赞数

分类专栏： html5 && css

本文链接：https://blog.csdn.net/qq_43745403/article/details/104291880

版权

html5 && css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!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>

时光无错孤独难谈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css5.子元素选择器

<!DOCTYPE html><html> <head> <meta charset="UTF-8"/> <style type="text/css"> /* 为第一个p设置颜色 :first-chi...
复制链接

扫一扫