<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>子元素的伪类</title>
        <style type="text/css">
            /* 
                :first-child
                -选择第一个子标签
                :last-child
                -选择最后一个子标签.
                :nth-child( ) 
                    该选择器后面可以指定一个参数,指定要选中的第几个子元素
                    even 表示偶数位置的子元素 :nth-child(even)
                    odd 表示基数位置的子元素    :nth-child(odd)
                -选择指定位置的子元素
                :first-of-type
                :last-of-type
                :nth-of-type
                    和:first-child这些非常类似
                    只不过child,是在所有的子元素中排列
                    而type是在当前类型的子元素中排列
                -选择指定类型的子元素
             */
            body>p:first-child {
                color: blue;
            }

            body>p:last-child {
                color: yellow;
            }

            p:nth-child(even) {
                color: #7FFF00;
            }

            p:nth-child(odd) {
                color: #FF0000;
            }

            p:last-of-type {
                color: darkgreen;
            }
        </style>
    </head>
    <body>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
        <span>这是span</span>
        <p>最后的p</p>
    </body>
</html>
posted on 2021-06-29 15:09 leiyanting 阅读(83) 评论(0) 收藏举报
刷新页面返回顶部
导航
